Для создания такого эффекта в CSS мы можем использовать линейный градиент. Для того чтобы фон слева сужался, а справа расширялся, нам понадобится градиент с двумя цветами, которые будут по разные стороны. Вот пример кода:
.gradient-background {
background: linear-gradient(to right, #ffffff 50%, #f0f0f0 50%);
}
В данном примере мы создаем линейный градиент, который начинается с белого цвета (код #ffffff) слева на 0%, а заканчивается серым цветом (код #f0f0f0) на 50%. Это и создает эффект сужения слева направо.
Если же вы хотите изменить позицию сужения или его градиент, вы можете регулировать значения в функции linear-gradient. Например, чтобы сделать сужение на 30%, код будет выглядеть так:
.gradient-background {
background: linear-gradient(to right, #ffffff 30%, #f0f0f0 70%);
}
Таким образом, вы можете легко настроить фон на своей веб-странице, чтобы создать интересные визуальные эффекты с помощью CSS.