Генератор CSS-градиентов
Создавайте красивые CSS-градиенты в визуальном редакторе.
Опорные цвета
Ориентация
CSS-код
Быстрые пресеты
Рекомендуемые инструменты
Подборка полезных утилит
Создание CSS-градиентов визуально
Обзор
CSS-градиенты создают плавные переходы цвета для фонов, кнопок и наложений. Писать синтаксис градиента вручную неудобно. Этот генератор позволяет подобрать цвета и направление визуально и выдаёт готовый CSS, с живым превью в браузере.
Как пользоваться (по шагам)
- 1
Выберите цвета
Добавьте две или больше цветовых точек.
- 2
Настройте тип и угол
Линейный, радиальный или конический, с нужным направлением.
- 3
Скопируйте CSS
Вставьте сгенерированное свойство background в таблицу стилей.
Как это работает
Вы выбираете цветовые точки (stops), их позиции и тип градиента — линейный, радиальный или конический — а инструмент строит соответствующее свойство background. Линейные идут по прямой под заданным углом; радиальные расходятся из центра. Добавление точек и настройка позиций задают переход. Вы видите результат вживую и копируете CSS.
Когда пригодится
Создание фонового градиента для hero-секции. Оформление кнопки или карточки переходом цвета. Прототипирование цветовой схемы до внесения в код.
Частые вопросы
Линейный переходит по прямой линии под углом; радиальный расходится наружу из центральной точки кругом или эллипсом.