CSS-градієнти: практичний посібник

Редакція ColorTag · 28 вересня 2026 · 4 хв читання

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

CSS-градієнт — це зображення, яке браузер малює на льоту: жодного файлу для завантаження, ідеальна різкість за будь-якого розміру й зміна одним рядком. Кожна сторінка кольору на ColorTag пропонує десятки готових градієнтів. Ця стаття пояснює, як вони побудовані, щоб ви могли їх підлаштувати або написати власні.

Три функції градієнтів

linear-gradient()

Кольори змінюються вздовж прямої. Перший аргумент — напрямок, кутом або ключовим словом:

background: linear-gradient(135deg, #0047AB, #50C878);
background: linear-gradient(to right, #FF7F50, #FFD700);

Кути відповідають компасу: 0deg — угору, 90deg — праворуч, 180deg — униз. Якщо напрямок не вказати, типове значення — to bottom. Діагональні градієнти на 135° чи 45° зазвичай виглядають динамічніше за вертикальні й краще приховують смуги.

radial-gradient()

Кольори розходяться від точки — колом чи еліпсом:

background: radial-gradient(circle at 30% 20%, #FFE5B4, #FF8C69 60%, #843179);

Радіальні градієнти добре підходять для м’якого світла за фото товару, сяйва й віньєток.

conic-gradient()

Кольори обертаються навколо центру, як стрілки годинника. Природний вибір для колірних кіл і кругових діаграм:

background: conic-gradient(#E32636 0 40%, #FFBF00 0 70%, #0047AB 0);

Цей приклад малює кругову діаграму з трьох секторів — 40%, 30% і 30% — з різкими межами між ними.

Колірні точки

Кожен колір може мати позицію. Без позицій кольори розподіляються рівномірно. З ними ви точно керуєте тим, де відбувається кожен перехід:

/* 70% площі лишається темно-синім, потім переходить у бірюзовий */
background: linear-gradient(180deg, #000080 0%, #000080 70%, #008080 100%);

/* Різка смуга: дві точки в одній позиції */
background: linear-gradient(90deg, #008080 50%, #FF7F50 50%);

Дві точки в одній позиції дають різку лінію без переходу — так малюють смуги, розділені фони й індикатори прогресу. Пари на сторінках кольорів ColorTag використовують цей прийом, щоб показати два кольори поруч.

Між двома точками можна додати підказку — самотній відсоток, що зсуває середину переходу: linear-gradient(90deg, #0047AB, 20%, #50C878) досягає проміжного кольору на 20%, а не на 50%.

Брудна середина і як її уникнути

Градієнт між двома додатковими кольорами, скажімо синім і жовтим, часто проходить посередині через тьмяний сірий. Причина в тому, що браузери традиційно інтерполюють у sRGB: канали усереднюються, а середнє між синім (0, 0, 255) і жовтим (255, 255, 0) — сірий (128, 128, 128).

Є три способи:

Додайте середню точку з насиченим кольором, який оберете самі, наприклад зелений між синім і жовтим.
Використовуйте аналогові кольори. Градієнти між близькими на колі тонами, як-от Зеленувато-блакитний → Нефритовий, ніколи не сіріють. Див. колірні гармонії.
Інтерполюйте в кращому колірному просторі. Сучасні браузери підтримують linear-gradient(in oklch, #0000FF, #FFFF00). OKLCH тримає світлоту й насиченість рівними протягом переходу, і середина лишається яскравою. Для старих браузерів поставте перед ним звичайний sRGB-градієнт як запасний варіант.

Смуги (бендинг)

Великі м’які градієнти, наприклад між двома схожими темно-синіми на весь перший екран, іноді показують помітні сходинки замість плавного переходу. Екран із 8 бітами на канал може показати лише 256 рівнів кожного каналу; розтягнуті на 2000 пікселів, деякі кроки стають помітними, особливо в темних тонах.

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

Текст на градієнтах

У градієнта немає єдиного кольору фону, тож і в тексту на ньому немає єдиного контрасту. Перевіряйте текст на найсвітлішій ділянці, яку він перекриває (або найтемнішій — для світлого тексту). Якщо співвідношення десь не проходить, обмежте градієнт темнішим діапазоном або розмістіть текст на суцільній плашці. Пороги описано в гіді з контрасту WCAG.

Шари й анімація

background приймає кілька зображень через кому, і градієнти можна накладати з прозорістю:

background:
  linear-gradient(180deg, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .65)),
  url(photo.jpg) center / cover;

Це стандартний спосіб зробити текст читабельним поверх фото: підкладка від прозорого до темного над зображенням.

Самі градієнти в старому CSS плавно не анімуються, але можна анімувати background-position градієнта, більшого за елемент, або зареєструвати власну властивість через @property і анімувати колір чи кут напряму.

Градієнтний текст і рамки

.title {
  background: linear-gradient(90deg, #8A2BE2, #FF00FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Градієнтний текст використовуйте лише для великих заголовків і стежте, щоб обидва кінці градієнта мали достатній контраст із фоном. Для рамок найпростіший надійний прийом — градієнтний фон на обгортці з відступом, рівним товщині рамки.

Чекліст

Обмежуйтеся двома-трьома спорідненими кольорами; більше точок рідко виглядає краще.
Для великих площ віддавайте перевагу діагоналям.
Стежте за серединою градієнтів між додатковими кольорами або інтерполюйте в OKLCH.
Перевіряйте контраст тексту в найгіршій точці.
Перевіряйте смуги на реальному екрані.