Справочник HTML & CSS

linear-gradient()

Плавный переход между цветами вдоль прямой — используется как фоновая картинка.

Синтаксис

linear-gradient(direction, color stop, …)

Параметры

Параметр	Тип	Описание
direction	angle \| to side	`to right`, `to bottom right` или угол `45deg`; по умолчанию сверху вниз.
color stop	color length	Цвет и по желанию его позиция: `gold 30%`.

Примеры

Вертикальный, горизонтальный и резкая граница — две точки на одной позиции:

<style>
  div { height: 50px; margin-bottom: 6px; }
</style>
 
<div style="background: linear-gradient(gold, tomato);"></div>
<div style="background: linear-gradient(to right, royalblue, violet, hotpink);"></div>
<div style="background: linear-gradient(45deg, teal 50%, gold 50%);"></div>

Повторяющийся градиент для полос:

<div style="height: 50px; background: repeating-linear-gradient(45deg, gold 0 10px, black 10px 20px);"></div>

Примечания

Градиент — это картинка, поэтому он идёт в background или background-image, а не в background-color.

См. также

radial-gradient() — Переход между цветами от центра к краям.
background-image — Одна или несколько фоновых картинок: файлы или градиенты.
background — Сокращённая запись всех свойств фона: цвета, картинки, положения, размера и повторения.

Вопросы и ответы по теме

В учебнике

Тени и градиенты — Тени блоков и текста — box-shadow и text-shadow, линейные и радиальные градиенты, точки цвета.

Спасибо, что читаете!