Создать аккаунт
Интерфейсы и CSSРаботает в браузере

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

Настройте безопасный CSS gradient, проверьте preview и скопируйте готовую declaration для интерфейсного слоя или design token.

  • Linear и radial
  • HEX color stops
  • Без remote assets
Онлайн-инструмент

Попробуйте инструмент

Добавьте данные, выберите нужные параметры и получите готовый результат.

Исходные данные

Результат

.gradient-surface {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}

Ваши данные остаются здесь

Текст и выбранные файлы обрабатываются в текущем браузере и не отправляются на сервер для получения результата.

Проверено: 2026-07-17
01

Как пользоваться

  1. 1

    Выберите linear или radial mode.

  2. 2

    Введите два HEX-цвета и stop-позиции.

  3. 3

    Скопируйте готовую CSS declaration после проверки preview.

02

Что умеет инструмент

  • Linear gradient с углом 0–360 градусов.
  • Radial gradient circle at center для базовых UI surfaces.
  • Проверка HEX 3/6 символов и диапазона stop-позиций 0–100%.
03

Когда пригодится

  • Быстрый background для hero, карточки или CTA.
  • Подбор gradient token перед переносом в дизайн-систему.
  • Проверка угла и stop-позиций без ручного CSS набора.
04

Что происходит внутри

Preview использует только валидированные HEX-цвета и числовые значения.

Генератор выдаёт plain CSS и не создаёт изображения или JavaScript snippets.

05

Вопросы и ответы

Можно добавить больше двух цветов?

В этом batch — нет. Инструмент намеренно ограничен двумя stop-позициями, чтобы не превращаться в визуальный редактор.

Почему только HEX?

HEX проще валидировать безопасно и достаточно для быстрого design-token workflow.