🌈

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

Создай красивый градиент: линейный, радиальный или конический. Готовый CSS — скопируй и вставь.

Готовые шаблоны:

Тип градиента:

Угол: 90°

Цветовые точки

CSS-код

Виды градиентов в CSS

Линейный (linear-gradient) — переход цвета по прямой линии. Самый частый.
Радиальный (radial-gradient) — расходится из центра кругом или эллипсом.
Конический (conic-gradient) — поворачивается вокруг центра. Им рисуют диаграммы-пироги и часы.
Повторяющиеся: repeating-linear-gradient, repeating-radial-gradient — создают полосы, узоры, окошки.

Где использовать

Фон кнопки: создаёт «глубину», объёмность
Фон сайта (subtle gradient — еле заметный, мягкий)
Hero-баннер на главной
Кружки прогресс-бара (conic-gradient)
Оверлей на фото для читаемости текста сверху
Текст с градиентной заливкой (background-clip: text)
Border с градиентом (border-image)

Советы по дизайну

Не больше 3-4 цветов — иначе радуга, выглядит дёшево
Цвета рядом по тону (синий + фиолетовый, оранжевый + красный) — естественнее
Угол 135° или диагональ — лучше смотрится, чем строго вертикальный
Высокая яркость + насыщенность — для кнопок и акцентов
Низкая насыщенность — для фона больших областей
Контраст с текстом важнее красоты — текст должен быть читаем на любой точке градиента

Поддержка браузерами

linear-gradient, radial-gradient — все браузеры с 2012 года
conic-gradient — Chrome 69+, Firefox 83+, Safari 12.1+. В Safari 12.0 и старых Edge — нет
Для очень старых браузеров: используй fallback color перед gradient

Частые вопросы

Можно ли анимировать градиент?

Прямо в CSS — нет (transition gradient не работает). Используй background-position: 0 0 → 100% 100% с большим background-size, или CSS-анимацию через keyframes с разными gradient-строками.

Как сделать градиентный текст?

background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Какой угол лучше для линейного градиента?

135° (диагональ слева сверху → справа снизу) — самый «естественный». Иногда 45° или 90° (вертикаль).

Можно ли наложить градиент на картинку?

Да, в CSS используй background: linear-gradient(...), url(...) — градиент идёт сверху картинки.