linear-gradient()

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

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

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

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

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

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

linear-gradient.png

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

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

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

Добавляя больше точек остановки цвета на линию градиента, вы можете точно задавать переходы между разными цветами. Позиции остановок цвета могут быть явно заданы использованием значений типа <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%);

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

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

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%, если на этой последней остановке не было объявлено никакой длины.

Синтаксис

/* Градиент наклонён на 45 градусов,
   начинается с синего, заканчивается красным */
linear-gradient(45deg, blue, red);

/* Градиент идёт от правого нижнего до левого верхнего угла,
   от синего до красного */
linear-gradient(to left top, blue, red);

/* Остановка цвета: градиент идёт снизу вверх,
   начинается синим, становится зелёным на 40% своей длины,
   и заканчивается красным */
linear-gradient(0deg, blue, green 40%, red);

/* Цветовая подсказка: градиент идёт слева направо,
   начинается с красного, достигает среднего цвета
   на 10% пути длины градиента,
   занимая оставшиеся 90% длины переходом в синий */ 
linear-gradient(.25turn, red, 10%, blue);

/* Многопозиционная остановка цвета: градиент повёрнут на 45 градусов,
   с красной нижней левой половиной, синей верхней правой половиной,
   с чёткой линией на месте перехода градиента из красного в синий */
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-градиентах.

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

linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  \---------------------------------/ \----------------------------/
      Определение линии градиента         Список остановок цвета  

где <side-or-corner> = [ left | right ] || [ top | bottom ]
  и <color-stop-list> = [ <linear-color-stop> [, <color-hint> ]? ]#, <linear-color-stop>
  и <linear-color-stop> = <color> [ <color-stop-length> ]?
  и <color-stop-length> = [ <percentage> | <length> ]{1,2}
  и <color-hint> = [ <percentage> | <length> ]

Примеры

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

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

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

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

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

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

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
Определение 'Gradient Color-Stops' в этой спецификации.
Рабочий черновик Добавлены подсказки по переходам
CSS Images Module Level 3
Определение 'linear-gradient()' в этой спецификации.
Кандидат в рекомендации Первоначальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
linear-gradient()Chrome Полная поддержка 26
Полная поддержка 26
Полная поддержка 10
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 16
Замечания
Полная поддержка 16
Замечания
Замечания Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Полная поддержка 3.6
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания 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.
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10
Замечания
Полная поддержка 10
Замечания
Замечания Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera Полная поддержка 12.1
Полная поддержка 12.1
Нет поддержки 11 — 15
С префиксом Замечания
С префиксом Требует вендорный префикс: -o-
Замечания 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.
Полная поддержка 15
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания 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.
Safari Полная поддержка 6.1
Полная поддержка 6.1
Полная поддержка 5.1
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания 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.
WebView Android Полная поддержка ≤37
Полная поддержка ≤37
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 26
Полная поддержка 26
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 16
Замечания
Полная поддержка 16
Замечания
Замечания Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Полная поддержка 4
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания 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.
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 12.1
Полная поддержка 12.1
Нет поддержки 11 — 14
С префиксом Замечания
С префиксом Требует вендорный префикс: -o-
Замечания 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.
Полная поддержка 14
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания 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.
Safari iOS Полная поддержка 6.1
Полная поддержка 6.1
Полная поддержка 6
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания 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.
Samsung Internet Android Полная поддержка 1.5
Полная поддержка 1.5
Полная поддержка 1.0
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Double-position color stopsChrome Полная поддержка 71Edge Полная поддержка 79Firefox Полная поддержка 64IE Нет поддержки НетOpera Полная поддержка 58Safari Полная поддержка 12.1WebView Android Полная поддержка 71Chrome Android Полная поддержка 71Firefox Android Полная поддержка 64Opera Android Полная поддержка 50Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 10.0
Interpolation Hints / Gradient MidpointsChrome Полная поддержка 40Edge Полная поддержка 79Firefox Полная поддержка 36IE Нет поддержки НетOpera Полная поддержка 27Safari Полная поддержка 6.1WebView Android Полная поддержка 40Chrome Android Полная поддержка 40Firefox Android Полная поддержка 36Opera Android Полная поддержка 27Safari iOS Полная поддержка 6.1Samsung Internet Android Полная поддержка 4.0
to keywordChrome Полная поддержка 26Edge Полная поддержка 12Firefox Полная поддержка 10IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 6.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 26Firefox Android Полная поддержка 10Opera Android Полная поддержка 14Safari iOS Полная поддержка 6.1Samsung Internet Android Полная поддержка 1.5
Unitless 0 for <angle>Chrome Полная поддержка 26Edge Полная поддержка 12Firefox Полная поддержка 55
Полная поддержка 55
Частичная поддержка 46
Замечания
Замечания Accepted only in -webkit-linear-gradient() and -moz-linear-gradient(), not linear-gradient().
IE Нет поддержки НетOpera Полная поддержка 16Safari Полная поддержка 6.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 26Firefox Android Полная поддержка 55
Полная поддержка 55
Частичная поддержка 46
Замечания
Замечания Accepted only in -webkit-linear-gradient() and -moz-linear-gradient(), not linear-gradient().
Opera Android Полная поддержка 14Safari iOS Полная поддержка 6.1Samsung Internet Android Полная поддержка 1.5

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также