Генератор CSS-градиента
Выберите тип градиента, меняйте цвета и их позиции — фон обновляется сразу, а ниже появляется готовый CSS-код для background.
.element {
background: #2563eb;
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
}Как пользоваться
- Выберите тип:
linear(вдоль прямой),radial(кругами от центра) илиconic(поворот вокруг центра). - Настройте угол или позицию: для linear
90deg— слева направо,180deg— сверху вниз. - Меняйте цветовые точки: у каждой есть цвет и позиция в процентах. Кнопка «+ Добавить» — до 6 точек.
- Нажмите «Копировать» и вставьте код в свой CSS-файл.
Как это работает
Градиент — это картинка, а не цвет
В CSS градиент относится к типу <image>, поэтому пишется в background или background-image, а не в background-color. Генератор добавляет первой строкой обычный цвет — запасной фон на случай, если градиент не отрисуется.
Угол и направление
linear-gradient(90deg, …) ведёт линию слева направо. Вместо угла можно писать ключевые слова: to right, to bottom right. 0deg — снизу вверх, 180deg — сверху вниз.
background: linear-gradient(to right, #2563eb, #7c3aed);Цветовые точки (color stops)
После каждого цвета можно указать позицию: #f00 0%, #00f 100%. Если две точки стоят в одной позиции, переход становится резким — так рисуют полосы.
background: linear-gradient(90deg, #2563eb 50%, #7c3aed 50%);radial и conic
radial-gradient(circle at center, …) расходится от центра к краям, conic-gradient(from 0deg, …) вращается вокруг центра — удобно для диаграмм и цветового круга. Префикс repeating- повторяет рисунок.
Частые вопросы
Как сделать градиентный текст?
Задайте градиент в background, затем добавьте background-clip: text и color: transparent — текст окрасится градиентом.
Почему не работает background-color: linear-gradient(...)?
Потому что градиент — это изображение, а не цвет. Используйте background или background-image.
Можно ли анимировать градиент?
Сам градиент напрямую не анимируется. Обычно увеличивают background-size и анимируют background-position или регистрируют цветовую переменную через @property.
Поддерживают ли браузеры?
linear-gradient и radial-gradient работают во всех современных браузерах, conic-gradient — во всех основных с 2020 года. Префиксы (-webkit-) больше не нужны.
