Створюйте лінійні, радіальні та конічні градієнти з необмеженою кількістю точок, OKLCH-інтерполяцією та виводом утиліт Tailwind v4. Живий попередній перегляд, 30+ пресетів, у вашому браузері.
Лінійний змішує кольори вздовж прямої лінії під заданим кутом (0° = вгору, 90° = вправо). Радіальний змішує від центральної точки назовні — коло чи еліпс, з ключовими словами розміру на кшталт farthest-corner. Конічний обертається навколо центральної точки — точки кольору розташовані під кутами, як стрілки годинника. Конічний чудово підходить для кругових діаграм, циферблатів і синтетичних фонів типу color-wheel.
При переході між неаналогічними відтінками — наприклад, синій → жовтий або червоний → зелений. sRGB-інтерполяція за замовчуванням проходить через брудну сіру середню точку; OKLCH (CSS Color Module 4 in oklch) зберігає середню точку насиченою, бо інтерполює в перцептивно однорідному просторі. Для двоточкових градієнтів між схожими відтінками різниця незначна. Для багатоточкових або широкодіапазонних градієнтів OKLCH значно кращий.
Лінійні / радіальні / конічні, плавні в OKLCH, з підтримкою Tailwind — і кілька дрібних деталей, які роблять користування справді приємним.
Лінійний з кутом 0–360°, радіальний з circle/ellipse + розміром + позицією, конічний зі стартовим кутом + позицією. Усі видають CSS, що відповідає стандарту CSS Images Module Level 4.
Додавайте точки на будь-якому відсотку, перетягуйте повзунок позиції для точного налаштування, клацайте по зразку, щоб обрати колір або вставити HEX. Точки автоматично сортуються у виводі. Натисніть ×, щоб видалити (мінімум 2 точки).
Перемикайтеся між sRGB за замовчуванням і сучасною інтерполяцією in oklch. OKLCH дає перцептивно плавніші середні точки — без брудних сірих смуг при переходах відтінків. Коректно деградує у браузерах, які ще не підтримують CSS Color 4.
Три панелі виводу оновлюються в реальному часі: чистий CSS (background-image: linear-gradient(...)), утиліта довільного значення Tailwind v4 (bg-[linear-gradient(...)]) та JSON-фрагмент design-токена, готовий для Style Dictionary або Figma Tokens.
Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — клацніть, щоб завантажити та налаштувати. Кожен пресет — це справжня продакшн-якісна стартова точка, а не просто назва.
Попередній перегляд рендериться нативним background-image, тож що бачите — те й видасть ваша таблиця стилів. Кожен піксель працює локально — відкрийте DevTools → Network і переконайтеся: жодних вихідних запитів.
Чотири кроки від чистого аркуша до готового до продакшну CSS, Tailwind або JSON.
Лінійний для фонів, шапок, hero-секцій. Радіальний для прожекторів, віньєток, кнопок зі світінням. Конічний для кругових діаграм, кольорових кіл і модних синтетичних фонів. Перемикайтеся між ними вкладками — ваші точки кольору зберігаються при перемиканні.
Клацніть зразок кольору, щоб відкрити пікер, або вставте HEX напряму в поле. Перетягніть повзунок, щоб встановити позицію точки 0–100%. Натисніть + Додати точку, щоб вставити нову точку в найбільший проміжок (з кольором середини). Загалом до 12 точок.
Для лінійного встановіть кут (0° — вгору, 90° — вправо). Для радіального оберіть форму, ключове слово розміру та позицію центру. Для конічного встановіть стартовий кут. Перемкніть Інтерполяцію кольору на OKLCH для перцептивно плавних середніх точок у багатовідтінкових градієнтах.
Три панелі оновлюються в реальному часі: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (форма design-токена). Скористайтеся іконкою копіювання на кожній або натисніть Завантажити CSS, щоб зберегти файл gradient.css, готовий до додавання в проєкт.
Чотири поширені сценарії, де браузерний інструмент із пріоритетом приватності перемагає відкриття Figma + окремого сайту градієнтів.
Виберіть пресет, близький до вашого бренду, додайте два брендові кольори у точки, перемкніться на OKLCH-інтерполяцію для чистої середньої точки. Скопіюйте CSS, вставте в стилі hero. Загальний час: менше 2 хвилин.
Створіть триточковий брендовий градієнт один раз, скопіюйте як JSON design-токен, додайте у Style Dictionary / Figma Tokens. Тепер кожна кнопка та картка на кожній платформі використовують той самий градієнт за посиланням. Оновіть в одному місці — поширюється всюди.
Синтетичні конічні градієнти ідеальні для візуалізацій кругових діаграм, шкал прогресу або станів shimmer «дані завантажуються». Виберіть конічний тип, встановіть стартовий кут, додайте точки на правильних відсотках — математика точно зіставляє кути 0–360° з відсотковими позиціями.
Створіть градієнт, встановіть співвідношення сторін під вашу ціль (16:9 для слайдів, 1:1 для IG, 3:1 для шапки X), зробіть скріншот попереднього перегляду. Або скопіюйте CSS у разовий HTML-файл і зробіть скріншот у браузері в точному розмірі пікселів, який вам потрібен.
Ваші кольори та градієнти ніколи не залишають ваш пристрій. Відкрийте DevTools → Network і ви побачите нуль вихідних запитів під час будь-якої операції.
background-image — тож відрендерений градієнт точно відповідає тому, що ваша таблиця стилів видасть у браузерах ваших користувачів.
Дібрані матеріали про CSS-градієнти, OKLCH-інтерполяцію та системи design-токенів.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Лінійний змішує кольори вздовж прямої лінії під заданим кутом (0° = вгору, 90° = вправо). Радіальний змішує від центральної точки назовні — коло чи еліпс, з ключовими словами розміру на кшталт farthest-corner. Конічний обертається навколо центральної точки — точки кольору розташовані під кутами, як стрілки годинника. Конічний чудово підходить для кругових діаграм, циферблатів і синтетичних фонів типу color-wheel.
При переході між неаналогічними відтінками — наприклад, синій → жовтий або червоний → зелений. sRGB-інтерполяція за замовчуванням проходить через брудну сіру середню точку; OKLCH (CSS Color Module 4 in oklch) зберігає середню точку насиченою, бо інтерполює в перцептивно однорідному просторі. Для двоточкових градієнтів між схожими відтінками різниця незначна. Для багатоточкових або широкодіапазонних градієнтів OKLCH значно кращий.
Утиліту з довільним значенням, яку можна вставити прямо в JSX / Blade / HTML: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. Жодних змін у tailwind.config.js; працює в будь-якому проєкті на Tailwind 4. Якщо ви віддаєте перевагу іменованим колірним токенам, скопіюйте натомість CSS і конвертуйте вручну.
Лінійні та радіальні градієнти всюди підтримуються з 2014 року. Конічні градієнти з’явилися в усіх вічнозелених браузерах до 2021 року. Ключове слово інтерполяції in oklch підтримується в Chrome 111+, Safari 16.2+, Firefox 113+. Якщо потрібна підтримка старіших браузерів, використовуйте sRGB-інтерполяцію за замовчуванням — візуальна різниця найбільш помітна для багатоточкових градієнтів зі стрибками відтінків.
Ні. Генерація рядка градієнта, серіалізація в CSS / Tailwind / JSON та живий попередній перегляд — усе працює в JavaScript на вашому пристрої. Відкрийте DevTools → Network і ви побачите нуль вихідних запитів під час будь-якої операції. Вставляйте брендові кольори, внутрішні токени — нічого не покидає ваш ноутбук.