Перейти к содержимому
🌈

Генератор случайных градиентов

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

background: linear-gradient(45deg, #000, #fff);
bg-gradient-to-br from-[#000] to-[#fff]
История

Как работает генератор градиентов?

Этот инструмент выбирает 2-3 цвета на основе теории гармоничного цвета (аналогичные, дополнительные или триадные отношения) с поворотами оттенка HSL. Случайные углы или позиции выбираются с помощью crypto.getRandomValues(). Вывод отображается как живой предпросмотр рядом с готовым к вставке CSS-кодом.

Типы градиентов

  • Линейный — цвета смешиваются вдоль прямой линии под настраиваемым углом.
  • Радиальный — цвета расходятся от центральной точки.
  • Конический — цвета вращаются вокруг центра, как цветовое колесо.

Применение

  • Hero-секции — привлекательные фоны для лендингов.
  • Карточки и кнопки — современные UI-акценты с глубиной.
  • Дизайн-вдохновение — открывайте неожиданные сочетания цветов.
  • Обои и баннеры — создавайте уникальные визуальные ассеты.

Конфиденциальность

Все градиенты генерируются на 100% в вашем браузере. Данные не отправляются на сервер.