Создатель градиентов

Воспринимающе равномерные градиенты OKLCH, без серых полос, экспорт CSS одним кликом.

Профиль →Позиция0%

Профиль →Позиция100%

Угол90°Плавная интерполяция (без мёртвых зон)

Библиотека градиентов

48 классических комбинаций сообщества — кликните, чтобы применить остановки, тип и угол за один раз.

Закат

Океан

Лес

Конфета

Сумерки

Приглушенные

Код CSS

background: linear-gradient(90deg, #1D3557 0%, 463C7B 25%, 7B3C8A 50%, B4387B 75%, #E63946 100%);

Как работает инструмент градиента — создавайте остановки, настраивайте, копируйте CSS.

2–6 остановок с свободным позиционированием, интерполяция OKLCH без размытых переходов, а также 48 готовых пресетов.

01
Создайте остановки
2–6 остановок: выберите каждый цвет, перетащите позиции или вставьте значения HEX.
02
Настройте
Переключайте между линейным, радиальным или коническим градиентом, перетаскивайте угол — или примените готовый пресет одним кликом.
03
Скопируйте
Режим сглаживания автоматически расширяет середины OKLCH; CSS-код готов к вставке, а ссылка сохраняет ваш градиент.

Часто задаваемые вопросы по градиентам

Четыре вопроса, которые действительно задают пользователи.

Почему градиенты становятся серыми посередине?: Интерполяция в RGB проходит через области низкой насыщенности. Интерполяция в OKLCH следует за оттенком, поэтому средний цвет остаётся чистым.
Можно ли добавить больше точек остановки?: Да — от 2 до 6 точек остановки, каждая со своим цветом и положением. В режиме плавности между соседними точками автоматически вставляются средние точки в OKLCH, поэтому весь градиент остаётся чистым.
В каких браузерах работает экспортированный CSS?: Во всех современных браузерах. Инструмент генерирует обычные точки остановки в RGB, поэтому конвертация не требуется даже для старых движков.
Как поделиться градиентом?: Каждое изменение синхронизируется с URL страницы (#g=...). Отправьте ссылку из адресной строки коллеге, и он откроет градиент точно в том виде, в котором вы его настроили.

После получения результата

Продолжите отсюда и используйте цвета в работе.

Генератор оттенков

Преобразует любой цвет в шкалу дизайн-системы из 11 шагов, перцептивно равномерную в OKLCH, с контролем контрастности по WCAG на каждом шаге, экспорт в Tailwind/CSS/SCSS/JSON.

Конвертер цветов

Введите любой формат (HEX / RGB / HSL / название) и конвертируйте в все цветовые пространства в реальном времени.

Панель палитр

Пробел для рандомизации, блокировка, перетаскивание для изменения порядка, обмен по URL — всё, что должна делать панель палитр.

Проверка контраста

Проверка контраста по WCAG 2.1 между любым цветом переднего плана и фона.

Как работает инструмент градиента — создавайте остановки, настраивайте, копируйте CSS.

Создайте остановки

2–6 остановок: выберите каждый цвет, перетащите позиции или вставьте значения HEX.

Настройте

Переключайте между линейным, радиальным или коническим градиентом, перетаскивайте угол — или примените готовый пресет одним кликом.

Скопируйте

Режим сглаживания автоматически расширяет середины OKLCH; CSS-код готов к вставке, а ссылка сохраняет ваш градиент.

Часто задаваемые вопросы по градиентам

Четыре вопроса, которые действительно задают пользователи.

Почему градиенты становятся серыми посередине?

Интерполяция в RGB проходит через области низкой насыщенности. Интерполяция в OKLCH следует за оттенком, поэтому средний цвет остаётся чистым.

Можно ли добавить больше точек остановки?

Да — от 2 до 6 точек остановки, каждая со своим цветом и положением. В режиме плавности между соседними точками автоматически вставляются средние точки в OKLCH, поэтому весь градиент остаётся чистым.

В каких браузерах работает экспортированный CSS?

Во всех современных браузерах. Инструмент генерирует обычные точки остановки в RGB, поэтому конвертация не требуется даже для старых движков.

Как поделиться градиентом?

Каждое изменение синхронизируется с URL страницы (#g=...). Отправьте ссылку из адресной строки коллеге, и он откроет градиент точно в том виде, в котором вы его настроили.