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

Собрать линейные, радиальные и конические градиенты и экспортировать CSS или изображение

Файлы не покидают устройство
Работает в браузере
Бесплатно, без регистрации и водяных знаков

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

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

Соберите линейные, радиальные и конические градиенты с любым числом цветовых точек, смешанных в sRGB, OKLab или OKLCH. Скопируйте результат как CSS, класс Tailwind или SVG либо скачайте изображение PNG, JPG или WebP до 8192 px по стороне.

1
Выберите тип (линейный, радиальный или конический) и задайте угол, форму или центр; для радиального и конического центр можно двигать перетаскиванием на предпросмотре.
2
Правьте цветовые точки: нажмите полосу, чтобы добавить точку, перетащите маркеры и меняйте цвет и позицию каждой в списке.
3
Выберите, как смешивать цвета (sRGB, OKLab или OKLCH), или начните с пресета или «Случайно».
4
Скопируйте код с вкладки CSS, Tailwind или SVG.
5
Для изображения задайте ширину и высоту или выберите размер, укажите PNG, JPG или WebP и нажмите «Скачать».

Частые вопросы

В чём разница смешивания sRGB, OKLab и OKLCH?

sRGB — классическое смешивание CSS, где дополнительные цвета могут стать серыми в середине. OKLab перцептивно ровный, без грязных середин. OKLCH сохраняет цвета яркими, двигаясь по цветовому кругу.

Работают ли градиенты OKLab и OKLCH в старых браузерах?

Вывод CSS начинается с запасной строки с заранее посчитанными точками для браузеров без поддержки «in oklab» или «in oklch». Код SVG и скачанные изображения тоже используют заранее посчитанные точки, поэтому выглядят одинаково везде.

Почему вкладка SVG отключена для конических градиентов?

В SVG нет конического градиента. Вместо этого скачайте изображение PNG, JPG или WebP.

Можно ли использовать прозрачные точки?

Да, цвета с альфой вроде rgba() или #rrggbbaa работают. Скачивайте PNG или WebP, чтобы сохранить прозрачность: у JPG нет альфа-канала.

Изображение делается на сервере?

Нет. Изображение рисуется на canvas в браузере и сохраняется напрямую, любым размером от 1 до 8192 px по стороне.

Как точно подвинуть точку с клавиатуры?

Сфокусируйте маркер точки и стрелками двигайте её на 1% (Shift — на 10%), Home или End прыгают к концам, Delete удаляет её. В градиенте всегда остаётся минимум две точки.