Генератор CSS градиентов онлайн — linear, radial, conic

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

1. Тип градиента

Линейный (linear-gradient) — переход по прямой. Задайте угол (0° — снизу вверх, 90° — слева направо) или выберите направление.

Радиальный (radial-gradient) — переход из центра к краям. Подходит для круговых и эллиптических градиентов.

Конический (conic-gradient) — переход по кругу вокруг центра. Удобно для диаграмм и декоративных эффектов.

2. Цветовые остановки

Добавляйте и удаляйте остановки, задавайте цвет (HEX или через палитру) и позицию в процентах. Порядок остановок можно менять. Превью обновляется сразу.

3. Копирование кода

Скопируйте готовый CSS и вставьте в свой проект. Код включает background или background-image с префиксами при необходимости.

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

Поддерживаются ли старые браузеры?

Современный синтаксис linear-gradient / radial-gradient / conic-gradient поддерживается во всех актуальных браузерах. Для очень старых версий иногда добавляют префикс -webkit-.

Можно ли использовать rgba или hsla?

Да. В поле цвета можно вводить любой допустимый в CSS формат: hex, rgb, rgba, hsl, hsla. Палитра рядом с полем задаёт только HEX.

Что такое conic-gradient?

Конический градиент рисует цвета по окружности вокруг точки. Удобен для круговых диаграмм, цветовых кругов и декоративных фонов.