Интерактивный генератор CSS-градиентов для посетителей сайта. Поддерживает три типа градиентов, готовые пресеты, историю и экспорт в PNG. Интерфейс двуязычный: русский и английский.
Типы градиентов
Линейный (Linear)
Классический градиент вдоль прямой линии.
- Угол — задаётся круговым диалом (перетаскивание мышью) или кнопками направлений: ↑ ↗ → ↘ ↓ ↙ ← ↖
- Диапазон угла: от 0° до 359°
- Текущее значение угла отображается рядом с диалом
Радиальный (Radial)
Градиент расходится из центральной точки.
- Форма — эллипс или круг
- Размер — четыре варианта: дальний угол, ближний угол, дальняя сторона, ближняя сторона
- Позиция X — горизонтальное положение центра, 0–100%
- Позиция Y — вертикальное положение центра, 0–100%
Конический (Conic)
Градиент вращается вокруг центральной точки, как цветовое колесо.
- Угол — начальный угол поворота, 0–359°
- Позиция X — горизонтальное положение центра, 0–100%
- Позиция Y — вертикальное положение центра, 0–100%
Цветовые стопы
Цветовые стопы определяют переходы цветов в градиенте. Минимум — 2 стопа, максимум не ограничен.
- Цвет — выбирается через стандартный color picker, hex-значение отображается рядом
- Позиция — положение стопа на шкале градиента, 0–100%, задаётся ползунком
- Шкала — интерактивная полоса в верхней части раздела, маркеры можно перетаскивать мышью
- Добавить цвет — кнопка добавляет новый стоп с автоматически подобранным цветом и позицией
- Удалить — кнопка × справа от каждого стопа, доступна если стопов больше двух
Предпросмотр
Область предпросмотра обновляется мгновенно при любом изменении параметров. В нижней части предпросмотра отображается текущая CSS-строка.
CSS код
Блок с готовым CSS расположен под настройками. Содержит полную строку свойства background для вставки в стили.
- Копировать — копирует CSS в буфер обмена одним кликом, кнопка подтверждает копирование
- PNG — экспортирует градиент как изображение 1200×800 px и скачивает файл
gradient.png
Пресеты
Вкладка в правой панели. Содержит 20 готовых градиентов, по всем трём типам.
- Линейные: Sunset, Ocean, Forest, Candy, Dusk, Aqua, Lava, Mint, Aurora, Gold
- Радиальные: Radial Glow, Spotlight, Flare, Portal, Neon Ring
- Конические: Rainbow, Hue Wheel, Spiral, Pie, Prism
Клик на пресет мгновенно применяет его настройки, тип градиента и цветовые стопы.
История
Вкладка в правой панели. Хранит до 30 ранее сохранённых градиентов в localStorage браузера.
- Сохранить — кнопка в нижней панели Генератор CSS градиентов
сохраняет текущий градиент в историю и переключает на вкладку История - Клик на сохранённый градиент восстанавливает все его настройки
- Кнопка × удаляет отдельную запись из истории
- История хранится локально в браузере посетителя и не передаётся на сервер
Переключение языка
Кнопка EN / RU в шапке генератора переключает язык интерфейса без перезагрузки страницы. Начальный язык задаётся параметром шорткода lang.