Роман Финк

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

Визуальный конструктор linear- и radial-градиентов. Color stops, угол наклона, готовый CSS-код.

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

До 5 цветов. Меняй позиции — превью обновляется на лету.

скопировано

О сервисе

Визуальный конструктор CSS-градиентов: linear и radial. До 5 цветов, регулировка позиций color stops, угла наклона. Готовый CSS для вставки.

Что умеет

  • Linear- и radial-градиенты
  • От 2 до 5 color stops с позициями в %
  • Слайдер угла для linear-градиента (0–360°)
  • Color picker для каждой точки
  • Живой превью 150 пикселей высотой

Как работает

Color stops сортируются по позиции, объединяются в строку «color N%, color N%». Результат — стандартный CSS-синтаксис linear-gradient() или radial-gradient().

Пример

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) — классический фиолетовый градиент.

Нужен подобный сервис для вашего сайта или сложный сценарий — пишите, разработаю под задачи.

Разрабатываю калькуляторы, сервисы для сайтов и веб-приложения