CSS
Тип
Угол
135°
Цвета
Пресеты

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

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

Готовый CSS-код

Инструмент генерирует готовое CSS-свойство background которое можно сразу вставить в стили. Поддерживаются все современные браузеры без префиксов.

До 5 точек цвета

Добавляй до 5 цветовых точек для сложных многоцветных градиентов. Каждая точка задаёт цвет и позицию в процентах. Удали лишние одним кликом.

Часто задаваемые вопросы
Как использовать CSS-градиент в проекте?
Скопируй сгенерированный CSS и вставь в свойство background любого элемента. Например: div { background: linear-gradient(135deg, #3B82F6, #8B5CF6); }
Чем отличается линейный от радиального?
Линейный создаёт переход вдоль прямой линии под углом. Радиальный создаёт круговой или эллиптический переход от центра к краям. Конический вращается вокруг точки.
Можно добавить несколько цветов?
Да, нажми «Добавить цвет» — можно добавить до 5 точек. Каждая точка задаёт цвет и позицию в процентах от 0 до 100.
Инструмент бесплатный?
Да, полностью бесплатно и без ограничений. Без регистрации, всё работает прямо в браузере.