Линейный градиент в CSS

Градиентная заливка добавляется через свойство background, в значении которого указывается функция linear-gradient

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%);