Как задать градиент в css background

Чтобы задать градиентный фон в CSS, нужно использовать свойство background и указать значение linear-gradient() для задания градиента.

Общий синтаксис для создания градиента:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction (направление) определяет направление градиента. Можно указать угол (в градусах), направление (top, bottom, left, right) или сочетание направлений (например, top left).
• color-stop1, color-stop2 и т.д. — это цвета, которые будут использованы в градиенте. Обычно устанавливаются как минимум два цвета: начальный и конечный.

Примеры:

/* горизонтальный градиент от красного к зеленому */
background: linear-gradient(to right, red, green);

/* вертикальный градиент с несколькими цветами */
background: linear-gradient(to bottom, 
                          #FFF 0%, 
                          #0000FF 50%, 
                          #000000 100%);

/* угловой градиент с несколькими цветами */
background: linear-gradient(135deg, 
                          #FFA500 0%, 
                          #FF00FF 50%, 
                          #008000 100%);

Здесь мы добавляем градиентный фон на элементы с заданными цветами и направлением.

Градиенты могут быть дополнены множеством опций для достижения более точного эффекта, таких как повторение градиента, маскирование заднего фона, добавление прозрачности и т.д.