Генератор CSS

Галерея CSS градиентов

Создайте набор отполированных градиентов из ваших цветов, сравнивайте различные направления и стили отрисовки и копируйте точный CSS-код, необходимый для фона, блоков или интерфейса продукта.

  • Генерируйте линейные, радиальные и конические вариации из одного набора данных.
  • Копируйте полные объявления CSS или чистую функцию градиента одним кликом.
  • Проверяйте позиции точек и ввод цвета перед экспортом.
  • Используйте случайные пресеты, если вам нужен быстрый старт вместо пустых полей.

Создайте свой набор градиентов

Выберите основной тип, определите до четырех точек цвета, затем сгенерируйте галерею подходящих вариаций. Пустые лишние точки игнорируются.

Используется для линейных и конических градиентов. Значения ограничены от 0 до 360 градусов.
Градиентные точки (Color stops)
Используйте HEX-цвета. Позиции точек округляются до целых процентов и должны идти в порядке возрастания.

Копируемый код использует формат background: ...;. Карточки предпросмотра также показывают чистую функцию градиента.

Основной результат отражает выбранный вами тип. Карточки галереи ниже показывают альтернативные направления и стили на основе тех же данных.

6 Вариаций галереи
Целые % Округление точек

Отрисовка может незначительно отличаться в разных браузерах, а большие конические градиенты могут иметь полосы на некоторых экранах. Экспортируемые позиции точек ограничены диапазоном от 0 до 100 и округлены до целых процентов для предсказуемого CSS.

Сравнивайте сгенерированные вариации рядом друг с другом, затем копируйте версию, которая подходит вашему макету, не перенастраивая точки вручную.

Как это работает

Генератор берет ваши активные точки цвета, очищает каждое значение и создает базовую строку градиента. На ее основе создается небольшая галерея связанных углов, радиальных положений и конических вращений, чтобы вы могли оценить реалистичные альтернативы без смены палитры.

Используются только валидные HEX-цвета. Пустые необязательные цвета пропускаются. Позиции точек сортируются только при валидных данных; если позиция уменьшается, страница помечает проблему вместо скрытого изменения ввода. Это сохраняет экспортируемый CSS соответствующим вашему вводу.

Действия копирования сначала пробуют Clipboard API, а при необходимости переключаются на временное текстовое поле. Если копирование недоступно, CSS остается видимым в блоке кода для ручного выбора.