Создавайте линейные, радиальные и конические градиенты с неограниченным числом стопов, OKLCH-интерполяцией и выводом утилит Tailwind v4. Живой предпросмотр, более 30 пресетов, всё в вашем браузере.
Линейный смешивается вдоль прямой линии под выбранным углом (0° = вверх, 90° = вправо). Радиальный смешивается от центральной точки наружу — circle или ellipse, с ключевыми словами размера вроде farthest-corner. Конический вращается вокруг центральной точки — цветовые стопы располагаются под углами, как стрелки часов. Conic отлично подходит для круговых диаграмм, шкал-индикаторов и синтетических фонов color-wheel.
При переходе между неаналогичными оттенками — например, синий → жёлтый или красный → зелёный. Стандартная интерполяция sRGB проходит через мутную серую среднюю точку; OKLCH (CSS Color Module 4 in oklch) сохраняет среднюю точку насыщенной, потому что интерполирует в перцептивно равномерном пространстве. Для двухстоповых градиентов между близкими оттенками разница невелика. Для многостоповых или с широким диапазоном оттенков OKLCH значительно лучше.
Linear / radial / conic, OKLCH-плавность, поддержка Tailwind — и несколько мелочей, которые делают использование действительно приятным.
Линейный с углом 0–360°, радиальный с circle/ellipse + размером + положением, конический с from-angle + положением. Все генерируют 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-сниппет дизайн-токена, готовый для 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 (форма дизайн-токена). Используйте иконку копирования на каждой или нажмите Скачать CSS, чтобы сохранить файл gradient.css, готовый к добавлению в проект.
Четыре частых сценария, где приватный браузерный инструмент лучше открытия Figma и отдельного сайта градиентов.
Выберите пресет, близкий к вашему бренду, поместите два ваших фирменных цвета в стопы, переключитесь на OKLCH-интерполяцию для чистой средней точки. Скопируйте CSS, вставьте в стиль вашей hero-секции. Общее время: меньше 2 минут.
Соберите трёхстоповый брендовый градиент один раз, скопируйте как JSON design token, добавьте в Style Dictionary / Figma Tokens. Теперь каждая кнопка и карточка на каждой платформе использует один и тот же градиент по ссылке. Обновите в одном месте — расходится повсюду.
Синтетические конические градиенты идеально подходят для круговых диаграмм, прогресс-индикаторов и shimmer-состояний при загрузке данных. Выберите тип conic, задайте начальный угол, расставьте стопы на нужных процентах — математика точно сопоставляет углы 0–360° с процентными позициями.
Соберите градиент, задайте соотношение сторон под цель (16:9 для слайдов, 1:1 для IG, 3:1 для шапки X), сделайте скриншот предпросмотра. Или скопируйте CSS в одноразовый HTML-файл и сделайте скриншот в браузере на нужном вам пиксельном размере.
Ваши цвета и градиенты никогда не покидают ваше устройство. Откройте DevTools → Network и увидите нулевой исходящий трафик при любых операциях.
background-image — поэтому отрисованный градиент в точности соответствует тому, что выдаст ваш стиль в браузерах ваших пользователей.
Отобранные материалы про CSS-градиенты, OKLCH-интерполяцию и системы дизайн-токенов.
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° = вправо). Радиальный смешивается от центральной точки наружу — circle или ellipse, с ключевыми словами размера вроде farthest-corner. Конический вращается вокруг центральной точки — цветовые стопы располагаются под углами, как стрелки часов. Conic отлично подходит для круговых диаграмм, шкал-индикаторов и синтетических фонов 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 года. Конические градиенты появились во всех evergreen-браузерах к 2021 году. Ключевое слово интерполяции in oklch поддерживается в Chrome 111+, Safari 16.2+, Firefox 113+. Если нужна поддержка старых браузеров, используйте стандартную sRGB-интерполяцию — визуальная разница важнее всего для многостоповых градиентов с резкими скачками оттенка.
Нет. Сборка строки градиента, сериализация CSS / Tailwind / JSON и живой предпросмотр — всё работает на JavaScript на вашем устройстве. Откройте DevTools → Network и увидите нулевой исходящий трафик при любых операциях. Вставляйте брендовые цвета, внутренние токены — ничего не покидает ваш ноутбук.