Генератор CSS-градиентов

Q: Почему при интерполяции OKLCH получается две строки background?

Браузеры, не знающие `in oklch`, отбрасывают такое объявление целиком. Первая строка это обычный градиент sRGB, который они смогут использовать; поддерживающие браузеры применят вторую.

Создавайте линейные, радиальные и конические CSS-градиенты с точками цвета, углами, повторением и интерполяцией OKLCH. Предпросмотр и готовый код.

Пресеты

Настройки градиента

Тип

Уголdeg

Цветовое пространство интерполяции

Повторяющийся градиент

Опорные цвета

Нажмите на полосу, чтобы добавить точку, перетаскивайте маркеры, чтобы двигать их. Цвета: hex, rgb(), hsl() или oklch().

Точка 1

Положение

Точка 2

Положение

Предпросмотр

CSS-код

background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);

Что такое Генератор CSS-градиентов?

Полноценный редактор CSS-градиентов с поддержкой linear-gradient, radial-gradient и conic-gradient, их повторяющихся вариантов и современной интерполяции цвета (in oklab / in oklch). Точки цвета можно перетаскивать по полосе или вводить точно, цвета принимаются в форматах hex, rgb(), hsl() и oklch().

Как пользоваться Генератор CSS-градиентов

Выберите пресет или тип: Linear, Radial или Conic.
Задайте угол (linear), начальный угол (conic) либо форму, размер и положение центра (radial/conic).
Редактируйте точки цвета: щёлкните по полосе, чтобы добавить точку, перетащите маркеры или введите цвет и позицию для каждой точки.
При желании включите повторяющийся градиент и выберите цветовое пространство интерполяции (OKLab или OKLCH).
Скопируйте CSS-код.

Пример

Ввод

Linear, angle 45°, stops #00c9ff at 0% and oklch(70% 0.2 150) at 80%, interpolation OKLCH

Вывод

background: linear-gradient(45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);
background: linear-gradient(in oklch 45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);

Первая строка нужна старым браузерам, вторая применяется там, где поддерживается интерполяция OKLCH.

Когда использовать Генератор CSS-градиентов

Подходит для фонов, кнопок, первых экранов, а также полос и цветовых кругов из градиентов. Для мягких фонов из нескольких точек используйте генератор Mesh-градиентов; для фотоэффектов на изображениях лучше CSS-фильтры.

Как работает Генератор CSS-градиентов

Точки сортируются по позиции и записываются как color position%. Линейные градиенты используют угол в градусах, радиальные shape [size] at x% y%, конические from angle at x% y%. Щелчок по полосе вставляет точку, цвет которой интерполируется между соседними. Если выбрано пространство интерполяции, инструмент выводит два объявления: сначала обычный запасной вариант в sRGB, затем тот же градиент с in oklch (или in oklab). Так старые браузеры сохраняют рабочий градиент, а современные используют более плавное перцептивное смешивание.

Распространенные Случаи Использования

Фоны первого экрана и секций
Кнопки и бейджи с градиентом
Цветовые круги и секторные диаграммы на conic-градиентах
Полосатые фоны на повторяющихся градиентах
Плавные градиенты OKLCH без серой середины, как у смешивания в sRGB

Часто Задаваемые Вопросы

Почему при интерполяции OKLCH получается две строки background?

Браузеры, не знающие in oklch, отбрасывают такое объявление целиком. Первая строка это обычный градиент sRGB, который они смогут использовать; поддерживающие браузеры применят вторую.

Что меняет интерполяция OKLCH?

Цвета смешиваются в перцептивно равномерном пространстве, поэтому градиенты между насыщенными цветами остаются яркими и не проходят через тусклую серую или грязную середину.