Як створювати градієнти, що не виглядають брудними

Градієнти переходили від несмаку до вишуканості й назад так багато разів, що дизайнери стали побоюватися їх. Але хороший градієнт — один із найдешевших способів змусити пласкуватий інтерфейс відчуватися так, ніби в нього є глибина й світло. Проблема в тому, що більшість градієнтів провалюються рівно в одному місці — посередині — і цей провал настільки поширений, що навчив ціле покоління дизайнерів узагалі уникати цього інструмента. Щойно ви зрозумієте, чому середина стає брудною, ви зможете виправити це свідомо, і градієнти стануть надійною частиною набору, а не азартом. Ось ментальна модель і ходи, які я насправді використовую.

Градієнт — це шлях, а не пара

Помилка, що ховається в кожному брудному градієнті, — мислити про нього як про два кольори. Це не так. Це шлях між двома кольорами, і питання, яке вирішує, чи виглядатиме він добре: який маршрут обирає перехід, щоб дістатися від A до B?

Коли ви пишете простий CSS-градієнт на кшталт linear-gradient(#3B82F6, #F59E0B) — синій до бурштинового — браузер за замовчуванням інтерполює в sRGB, проходячи прямою лінією крізь колірний простір. Уявіть колірне коло згори. Синій сидить з одного боку, бурштин приблизно навпроти. Пряма лінія між ними не йде по барвистому обідку; вона проходить прямо через знебарвлений сірий центр. Тож середина того градієнта — це сумний, вимитий сіруватий тон. Це і є бруд. Це не баг рендерингу — це геометрія. Найкоротший шлях між двома протилежними відтінками проходить через сірий.

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

Важіль перший: обирайте кольори, добрі один до одного

Найлегший чистий градієнт — між двома кольорами, близькими за відтінком — аналогічною парою. Змішайте #3B82F6 (синій) у #6366F1 (індиго), і шлях по прямій ледь покидає синьо-фіолетове сусідство, тож немає сірої зони, в яку можна впасти. Результат плавний і насичений автоматично.

Саме тому так багато преміально-відчутних градієнтів делікатні: синій до фіолетового, бірюзовий до зеленого, пурпуровий до червоно-оранжевого. Вони аналогічні, часто в межах 30–60 градусів відтінку, і вони варіюють світлоту більше, ніж відтінок. Градієнт, що переважно змінює світлоту, тримаючи відтінок майже постійним, майже неможливо зробити брудним. Якщо хочете безпечну стартову точку, спершу побудуйте монохроматичний чи аналогічний набір, а потім змішуйте всередині нього.

Наслідок: комплементарні градієнти (кольори за 180 градусів) — найважчі для збереження чистими, саме тому, що їхній прямий шлях іде прямо через центр. Їх можна зробити — але вони потребують одного з наступних двох важелів.

Важіль другий: додайте стоп, щоб направити шлях

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

Замість linear-gradient(#3B82F6, #F59E0B) спробуйте провести шлях через відтінок, що їх з'єднує: linear-gradient(#3B82F6, #C084FC, #F59E0B). Цей фіолетовий середній стоп тягне шлях навколо кола через пурпуровий і рожевий, а не через сірий. Тепер перехід залишається насиченим протягом усього шляху. Ви вручну намалювали барвистий маршрут, який пряма лінія відмовилася взяти.

Вибір з'єднувального кольору — це ремісницька частина. Запитайте, в який бік навколо кола ви хочете рухатися — синій до бурштинового може йти через фіолетовий/пурпуровий (теплий маршрут) або через зелений/бірюзовий (холодний маршрут), і вони відчуваються зовсім по-різному. Теплий маршрут читається як захід сонця; холодний маршрут читається як тропіки. Обирайте навмисно. Ви можете швидко прослухати з'єднувальні кольори, згенерувавши палітру в генераторі кольорових палітр і вкинувши кандидатські відтінки між вашими кінцевими точками.

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

Важіль третій: інтерполюйте в кращому колірному просторі

Сучасне виправлення, і дедалі більше мій стандарт, — змінити простір, у якому відбувається перехід. CSS тепер дозволяє вказати колірний простір інтерполяції безпосередньо: linear-gradient(in oklch, #3B82F6, #F59E0B).

OKLCH (і його родич LCH) перцептивно рівномірний — однакові числові кроки виглядають як однакові візуальні кроки для вашого ока — і, що ключово, коли ви просите його інтерполювати відтінок, він рухається навколо кола відтінків, а не через декартову середину. Практичний ефект полягає в тому, що той самий двоколірний градієнт від синього до бурштинового перестає занурюватися в сірий і натомість прокочується крізь яскраві проміжні відтінки автоматично, без потреби в ручному стопі. Документація MDN про інтерполяцію кольору градієнтів охоплює синтаксис і опції shorter hue / longer hue, які дозволяють контролювати, в якому напрямку навколо кола йде перехід.

Кілька чесних застережень. Підтримка браузерами in oklch хороша в сучасних браузерах, але не універсальна, тож надавайте стандартний запасний варіант sRGB (background: linear-gradient(#3B82F6, #F59E0B); перед рядком OKLCH). А OKLCH інколи може давати надто яскраву середину для делікатних фонів — для ледь помітного героїчного фону простий sRGB між близькими кольорами усе ще підходить. Тягніться до OKLCH, коли кінцеві точки далеко одна від одної й ви хочете, щоб вони залишалися насиченими.

Кути, типи та де належать градієнти

Шлях — це важка частина; решта — справа смаку, але є конвенції, які варто знати.

• Лінійний, зверху вниз (`180deg`) імітує верхнє світло й відчувається природно на кнопках і картках. Кнопка від #4F8EF7 донизу до #3B6FD4 читається як м'яко освітлена й тривимірна.
• Діагональний (`135deg`) додає напрямок і енергію — стандарт для великих героїчних фонів, бо відчувається динамічним, не будучи гучним.
• Радіальні градієнти ставлять м'яке сяйво в точку; чудово для висвітлення фокусного елемента чи імітації навколишнього світла за карткою.
• Конічні градієнти прокочують відтінок навколо центру і здебільшого для діаграм, завантажувачів і коліс підбору кольору, а не для фонів.

Для глибини тримайте два кольори близькими за світлотою і відтінком — делікатний градієнт (#1E293B до #0F172A) на темній поверхні додає насиченості, яку не може дати жодна пласка заливка. Для ефекту дозвольте градієнту бути героєм і дайте йому простір.

Не забувайте про текст

У градієнтів і тексту складні стосунки. Контраст має триматися по всьому розмаху градієнта, а не лише там, де ви випадково кинули заголовок. Заголовок, що проходить контраст WCAG над світлим верхом градієнта, може тихо провалитися над темнішим низом. Тестуйте найгіршу точку, спирайтеся на коефіцієнти контрасту WCAG (4,5:1 для основного тексту, згідно з настановами W3C), а коли сумніваєтеся, киньте напівпрозоре суцільне накладання за текстом, щоб його фон був передбачуваним. Або просто тримайте градієнти в декоративних зонах і ставте текст на суцільні заливки.

Коротка версія

Перестаньте думати про градієнт як про два кольори й почніть думати про нього як про лінію між ними. Брудні середини походять від прямого шляху через сірий; ви виправляєте їх, обираючи добріші кольори, направляючи проміжним стопом, або інтерполюючи в OKLCH, щоб шлях вигинався навколо обідка. Опануйте це — і градієнти перестануть бути ризиком і стануть одним із найефективніших способів додати світло, глибину й особистість пласкій роботі. Витягніть два кольори з генератора кольорових палітр, вкиньте їх у linear-gradient(in oklch, …) і спостерігайте, як перехід, що став би сірим, залишається живим протягом усього шляху.