Линейный градиент в CSS
10 августа 2019
Градиентная заливка добавляется через свойство background, в значении которого указывается функция linear-gradient
Аргументы функции linear-gradient(направление градиента, начальный цвет, конечный цвет):
Начальный и конечный цвет используются для простой записи градиента. Для сложных градиентов функция linear-gradient поддерживает множественность цветов. В таких случаях через запятую указываются все используемые цвета.
Пример градиентного фона, состоящего из 4-х цветов:

background: #4cbdca; /* обработка для старых браузеров */
background: linear-gradient(to right, #4cbdca, #1a8da7);
Аргументы функции linear-gradient(направление градиента, начальный цвет, конечный цвет):
- Направление градиента - указывается с префиксом to и ключевыми словами top, right, bottom, left. Если градиент имеет направление к углам (например, в верхний левый угол), то ключевые слова можно совмещать (to top left). Так же направление градиента можно указывать в градусах, например, 30deg;
- Начальный цвет - цвет начала градиента. Значение указывается с помощью ключевых слов (transparent, green, blue и т.д), HEX и RGBA кодов. После цвета через пробел можно указать положение точки цвета на градиенте. Значение положения указывается в процентах и других единицах измерения CSS;
- Конечный цвет - цвет конца градиента. Значение указывается с помощью ключевых слов (transparent, green, blue и т.д), HEX и RGBA кодов. После цвета через пробел можно указать положение точки цвета на градиенте. Значение положения указывается в процентах и других единицах измерения CSS.
Начальный и конечный цвет используются для простой записи градиента. Для сложных градиентов функция linear-gradient поддерживает множественность цветов. В таких случаях через запятую указываются все используемые цвета.
Пример градиентного фона, состоящего из 4-х цветов:
background: #4cbdca; /* обработка для старых браузеров */
background: linear-gradient(90deg, #4cbdca 20%, rgba(105,204,74, 0.8) 40%, white 60%, #1a8da7 100%);
