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>

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

[!NOTE] Відображення кольорових зупинок градієнтів 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( [ <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 {
  width: 100vw;
  height: 100vh;
}

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

Градієнт, що починається на 60% своєї лінії

body {
  width: 100vw;
  height: 100vh;
}

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

Інтерполяція в прямокутному кольоровому просторі

body {
  width: 100vw;
  height: 100vh;
}

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

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

<div class="shorter">коротший відтінок</div>
<div class="longer">довший відтінок</div>

div {
  height: 50vh;
  color: white;
  font-weight: bolder;
}

У цьому прикладі інтерполяції використовується система кольорів hsl, а інтерполюється відтінок.

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

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

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

Градієнт з колірними зупинками з багатьма положеннями

Цей приклад демонструє колірні зупинки з багатьма положеннями, де сусідні кольори мають однакове значення колірної зупинки, утворюючи ефект смуг.

body {
  width: 100vw;
  height: 100vh;
}

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

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

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

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

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

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

• Використання градієнтів CSS
• Інші функції градієнта: repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• Модуль зображень CSS