7 мин чтения
2026-02-12
Цвета переходят по прямой линии. Задаётся направление и цветовые точки.
Цвета расходятся из центральной точки кругами или эллипсами.
Цвета вращаются вокруг центральной точки, как на цветовом круге.
Выберите тип градиента
Добавьте цветовые точки (минимум 2)
Настройте угол или центр
Скопируйте готовый CSS-код
| Тип | CSS |
|---|---|
| Линейный | `linear-gradient(90deg, #ff6b6b, #4ecdc4)` |
| Радиальный | `radial-gradient(circle, #667eea, #764ba2)` |
| Конический | `conic-gradient(#f093fb, #f5576c, #f093fb)` |
Используйте 2–3 цвета для элегантности
Аналогичные цвета создают мягкий переход
Комплементарные цвета — яркий и энергичный эффект
Добавляйте промежуточные точки для контроля перехода
Градиенты используются для фонов страниц, кнопок, заголовков, карточек и декоративных элементов.
Смотрите также: Генератор палитр, Генератор аватаров, Конвертер цветов