<gradient>

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

Тип <gradient> данных определяется одним из перечисленных ниже типов функций.

Линейные градиенты плавно переходят между цветами вдоль воображаемой линии. Они генерируются с помощью функции linear-gradient().

Радиальные градиенты плавно переходят между цветами от центральной точки (начала). Они генерируются с помощью функции radial-gradient().

Конические градиенты плавно переходят между цветами по окружности. Они генерируются с помощью функции conic-gradient().

Повторяющиеся градиенты дублируют градиент столько раз, сколько необходимо для заполнения заданной области. Они генерируются функциями repeating-linear-gradient(), repeating-radial-gradient() и repeating-conic-gradient().

Как и любая интерполяция, связанная с цветами, градиенты рассчитываются в цветовом пространстве с предварительным умножением на альфа-канал. Это предотвращает появление неожиданных оттенков серого при одновременном изменении цвета и непрозрачности. (Обратите внимание, что старые браузеры могут не использовать это поведение при использовании ключевого слова прозрачный.)

<gradient> = 
  <linear-gradient()>            |
  <repeating-linear-gradient()>  |
  <radial-gradient()>            |
  <repeating-radial-gradient()>  

<linear-gradient()> = 
  linear-gradient( [ <linear-gradient-syntax> ] )  

<repeating-linear-gradient()> = 
  repeating-linear-gradient( [ <linear-gradient-syntax> ] )  

<radial-gradient()> = 
  radial-gradient( [ <radial-gradient-syntax> ] )  

<repeating-radial-gradient()> = 
  repeating-radial-gradient( [ <radial-gradient-syntax> ] )  

<linear-gradient-syntax> = 
  [ <angle> | to <side-or-corner> ]? , <color-stop-list>  

<radial-gradient-syntax> = 
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<radial-shape> = 
  circle   |
  ellipse  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<linear-color-stop> = 
  <color> <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

Простой линейный градиент.

.linear-gradient {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

Простой радиальный градиент.

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30 144 255));
}

Пример простого конического градиента. Обратите внимание, что на данный момент он не поддерживается во всех браузерах.

.conic-gradient {
  background: conic-gradient(pink, coral, lime);
}

Примеры простых повторяющихся линейных и радиальных градиентов.

.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    pink,
    pink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    lime,
    lime 15px,
    white 15px,
    white 30px
  );
}

.conic-repeat {
  background: repeating-conic-gradient(lime, pink 30deg);
}

• Использование CSS-градиентов
• Функции градиента: linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• Основные типы данных CSS
• Единицы и значения CSS
• Введение в CSS: Значения и единицы