linear-gradient()

Функція CSS linear-gradient() (лінійний градієнт) створює зображення, що складається з поступового переходу між двома або більше кольорами уздовж прямої лінії. Її результатом є об'єкт типу даних <gradient>, котрий є особливим різновидом <image>.

Спробуйте його в дії

Синтаксис

/* Градієнт під кутом 45 градусів,
  починається синім і закінчується червоним */
linear-gradient(45deg, blue, red)

/* Градієнт з нижнього правого кута у верхній лівий кут,
   починається синім і закінчується червоним */
linear-gradient(to left top, blue, red)

/* Інтерполяція в прямокутному кольоровому просторі */
linear-gradient(in oklab, blue, red)

/* Інтерполяція в полярному кольоровому просторі */
linear-gradient(in hsl, blue, red)

/* Інтерполяція в полярному кольоровому просторі
   з довшим методом інтерполяції відтінку */
linear-gradient(in hsl longer hue, 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.

Опис

Як і будь-який градієнт, лінійний градієнт не має власних розмірів; тобто не має природного або бажаного розміру, як не має і бажаного співвідношення сторін. Його конкретний розмір відповідатиме розміру елемента, до якого застосовується.

Щоб створити лінійний градієнт, котрий повторюється для заповнення власного контейнера, слід натомість використовувати функцію 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%);

Якщо дві чи більше кольорових зупинок стоять в одному місці, то перехід буде різкою лінією між першим та останнім кольорами, оголошеними в такому місці.

Кольорові зупинки повинні бути перелічені в порядку зростання. Наступні кольорові зупинки з меншими значеннями відкидають значення попередньої колірної зупинки, утворюючи різкий перехід. Наступний градієнт змінюється з червоного до жовтого на позначці 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( [ <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> <color-stop-length>?
<linear-color-hint> = <length-percentage>

де
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<color-stop-length> = <length-percentage>{1,2}
<length-percentage> = <length> | <percentage>

де
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<lab()> = lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
<lch()> = lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

де
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Приклади

Градієнт під кутом 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);
}

Інтерполяція з відтінком

У цьому прикладі інтерполяції використовується система кольорів 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%
  );
}

Більше прикладів linear-gradient

Будь ласка, дивіться більше прикладів у використанні градієнтів CSS.

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
linear-gradient()
Chrome Full support 26
Edge Full support 12
Firefox Full support 16
footnote
Internet Explorer Full support 10
footnote
Opera Full support 12.1
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 16
footnote
Opera Android Full support 12.1
Safari on iOS Full support 7
Samsung Internet Full support 1.5
Double-position color stops
Chrome Full support 71
Edge Full support 79
Firefox Full support 64
Internet Explorer No support No
Opera Full support 58
Safari Full support 12.1
WebView Android Full support 71
Chrome Android Full support 71
Firefox for Android Full support 64
Opera Android Full support 50
Safari on iOS Full support 12.2
Samsung Internet Full support 10.0
Interpolation Hints / Gradient Midpoints
Chrome Full support 40
Edge Full support 79
Firefox Full support 36
Internet Explorer No support No
Opera Full support 27
Safari Full support 7
WebView Android Full support 40
Chrome Android Full support 40
Firefox for Android Full support 36
Opera Android Full support 27
Safari on iOS Full support 7
Samsung Internet Full support 4.0
to keyword
Chrome Full support 26
Edge Full support 12
Firefox Full support 10
Internet Explorer Full support 10
Opera Full support 12.1
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 10
Opera Android Full support 14
Safari on iOS Full support 7
Samsung Internet Full support 1.5
Unitless 0 for <angle>
Chrome Full support 26
Edge Full support 12
Firefox Full support 55
Internet Explorer No support No
Opera Full support 16
Safari Full support 7
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 55
Opera Android Full support 14
Safari on iOS Full support 7
Samsung Internet Full support 1.5

Дивіться також