linear-gradient()

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Функция linear-gradient() CSS функция создаёт изображение, представляющее собой плавный переход между двумя или более цветами по прямой линии. Результатом является объект типа <gradient>, представляющего собой особый вид <image>.

Попробовать

Синтаксис

/* A gradient tilted 45 degrees,
   starting blue and finishing red */
linear-gradient(45deg, blue, red)

/* A gradient going from the bottom right to the top left corner,
   starting blue and finishing red */
linear-gradient(to left top, blue, red)

/* Interpolation in rectangular color space */
linear-gradient(in oklab, blue, red)

/* Interpolation in polar color space */
linear-gradient(in hsl, blue, red)

/* Interpolation in polar color space
  with longer hue interpolation method */
linear-gradient(in hsl longer hue, blue, red)

/* Color stop: A gradient going from the bottom to top,
   starting blue, turning green at 40% of its length,
   and finishing red */
linear-gradient(0deg, blue, green 40%, red)

/* Color hint: A gradient going from the left to right,
   starting red, getting to the midpoint color
   10% of the way across the length of the gradient,
   taking the rest of the 90% of the length to change to blue */
linear-gradient(.25turn, red, 10%, blue)

/* Multi-position color stop: A gradient tilted 45 degrees,
   with a red bottom-left half and a blue top-right half,
   with a hard line where the gradient changes from red to blue */
linear-gradient(45deg, red 0 50%, blue 50% 100%)

Значения

<side-or-corner>

Положение начальной точки линии градиента. Если указано, оно состоит из слова to и до двух ключевых слов: одно указывает горизонтальную сторону (left или right), а другое — вертикальную сторону (top или bottom). Порядок ключевых слов сторон не имеет значения. Если не указано, по умолчанию используется to bottom.

Значения to top, to bottom, to left, и to right эквивалентны углам 0deg, 180deg, 270deg, и 90deg, соответственно. Другие значения переводятся в угол.

<angle>

Угол направления линии градиента. Значение 0deg эквивалентно to top; возрастающие значения вращаются по часовой стрелке оттуда.

<linear-color-stop>

Значение <color> точки цвета, за которым следует одна или две необязательные позиции остановки (каждая из которых является либо <percentage>, либо <length> вдоль оси градиента).

<color-hint>

Подсказка интерполяции, определяющая, как происходит переход градиента между смежными точками цвета. Длина определяет, в какой точке между двумя точками цвета цвет градиента должен достигать середины цветового перехода. Если опущен, середина цветового перехода — это середина между двумя точками цвета.

Примечание: Рендеринг точек цвета в CSS-градиентах подчиняется тем же правилам, что и точки цвета в SVG-градиентах.

Описание

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

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

Поскольку <gradient> относятся к типу данных <image>, они могут использоваться только там, где могут использоваться <image>. По этой причине linear-gradient() не будет работать с background-color и другими свойствами, которые используют тип данных <color>.

Состав линейного градиента

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

Линия градиента определяется центром прямоугольника, содержащего изображение градиента, и углом. Цвета градиента определяются двумя или более точками: начальной точкой, конечной точкой и, между ними, необязательными точками остановки цвета.

Начальная точка — это местоположение на линии градиента, где начинается первый цвет. Конечная точка — это точка, где заканчивается последний цвет. Каждая из этих двух точек определяется пересечением линии градиента с перпендикулярной линией, проходящей от угла прямоугольника, который находится в том же квадранте. Конечная точка может быть понята как симметричная точка начальной точки. Эти несколько сложные определения приводят к интересному эффекту, иногда называемому «магическими углами»: углы, ближайшие к начальной и конечной точкам, имеют тот же цвет, что и соответствующие начальная или конечная точки.

Настройка градиентов

Добавление дополнительных точек остановки цвета на линии градиента позволяет создать настраиваемый переход между несколькими цветами. Положение точки остановки цвета можно явно определить с помощью <length> или <percentage>. Если вы не укажете расположение цвета, он разместится посередине между предшествующим и последующим цветом. Два следующих градиента эквивалентны.

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

По умолчанию цвета плавно переходят от цвета в одной точке остановки к цвету в последующей точке остановки, при этом середина между цветами — это середина между цветовым переходом. Вы можете переместить эту середину в любое положение между двумя точками остановки цвета, добавив неописанную подсказку цвета между двумя цветами, чтобы указать, где должна находиться середина цветового перехода. В следующем примере цвет твёрдо красный с начала до отметки 10% и твёрдо синий с 90% до конца. Между 10% и 90% цвет переходит от красного к синему, однако середина перехода находится на отметке 30%, а не 50%, как было бы без подсказки цвета 30%.

linear-gradient(red 10%, 30%, blue 90%);

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

Точки остановки цвета должны быть упорядочены по возрастанию. Последующие точки остановки с меньшим значением перепишут значение предыдущей точки остановки, создавая резкий переход. В следующем примере происходит переход от красного к жёлтому на отметке 40%, а затем переход от жёлтого к синему более чем на 25% градиента:

linear-gradient(red 40%, yellow 30%, blue 65%);

Разрешены точки остановки с несколькими позициями. Цвет можно объявить как две соседние точки остановки, включив обе позиции в объявление CSS. Три следующих градиента эквивалентны:

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

По умолчанию, если нет цвета с точкой остановки 0%, первый объявленный цвет будет в этой точке. Аналогично, последний цвет будет продолжаться до отметки 100%, или до отметки 100%, если для этой последней остановки не объявлена длина.

Формальный синтаксис

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

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

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

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

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

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

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

Примеры

Градиент под углом 45 градусов

body {
  background: linear-gradient(45deg, red, blue);
}

Градиент, начинающийся на 60% линии градиента

body {
  background: linear-gradient(135deg, orange 60%, cyan);
}

Интерполяция в прямоугольном цветовом пространстве

body {
  background: linear-gradient(90deg in oklab, blue, red);
}

END_OF_DOCUMENT_MARKER

Интерполяция с оттенком

В этом примере для интерполяции используется цветовая система hsl, и интерполируется оттенок.

.shorter {
  background: linear-gradient(90deg in hsl shorter hue, red, blue);
}

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

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

Градиент с несколькими позиционными цветовыми остановками

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

body {
  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );
}

Дополнительные примеры линейных градиентов

Дополнительные примеры можно посмотреть в разделе использование CSS градиентов.

Спецификации

Спецификация
CSS Images Module Level 4 # линейные градиенты

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`linear-gradient`	2610	12	1649 3.6 ["Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."]	12.1 15 Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right. 11–15 Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.	7 5.1 ["Safari 4 was supporting an experimental `-webkit-gradient(linear,…)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."]	2618	1649 4 ["Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."]	12.1 14 Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right. 11–14 Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.	7 5 ["Safari 4 was supporting an experimental `-webkit-gradient(linear,…)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."]	1.51.0	≤37≤37
`doubleposition`	71	79	64	58	12.1	71	64	50	12.2	10.0	71
`hue_interpolation_method`	111	111	127121	97	16.2	111	127	75	16.2	22.0	111
`interpolation_color_space`	111	111	127121	97	16.2	111	127	75	16.2	22.0	111
`interpolation_hints`	40	79	36	27	7	40	36	27	7	4.0	40
`premultiplied_gradients`	29	79	36	16	15	29	36	16	15	2.0	4.4
`to`	26	12	10	12.1	7	26	10	14	7	1.5	4.4
`unitless_0_angle`	26	12	55 46 Поддерживается только в `-webkit-linear-gradient()` и `-moz-linear-gradient()`, а не `linear-gradient()`.	16	7	26	55 46 Поддерживается только в `-webkit-linear-gradient()` и `-moz-linear-gradient()`, а не `linear-gradient()`.	14	7	1.5	4.4

См. также

Использование CSS градиентов
Другие функции градиента: repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
<hue-interpolation-method>
<color-interpolation-method>
<image>
Модуль CSS изображений

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient