background: linear-gradient(to bottom, rgba(59, 130, 246, 1) 0%, rgba(139, 92, 246, 1) 100%);
bg-[linear-gradient(to_bottom,_rgba(59,_130,_246,_1)_0%,_rgba(139,_92,_246,_1)_100%)]
Готовые градиенты — кликните, чтобы загрузить в конструктор
Что такое CSS-градиент
CSS-градиент — это плавный переход между двумя и более цветами, который задаётся прямо в CSS как значение background, без картинок. Есть три типа: linear-gradient (вдоль линии), radial-gradient (от центра) и conic-gradient (по кругу). Градиенты векторные, поэтому они не грузятся отдельным файлом, масштабируются без потерь и легко анимируются.
Как пользоваться генератором
- Выберите тип градиента: линейный, радиальный или конический.
- Добавьте цветовые точки и задайте их позиции и направление.
- Скопируйте готовый CSS или Tailwind-классы одной кнопкой.
- Вставьте код в свойство background нужного элемента.
Примеры градиентов
Линейный градиент
Плавный переход цвета вдоль прямой. Угол задаёт направление: 90deg слева направо, 45deg по диагонали.
background: linear-gradient(90deg, #a855f7, #ec4899);Радиальный градиент
Цвет расходится от центра наружу кругом или эллипсом. Удобно для подсветки, «свечения» и фонов.
background: radial-gradient(circle, #a855f7, #ec4899);Конический градиент
Цвета вращаются вокруг центра, как цветовое колесо. Основа круговых диаграмм и индикаторов загрузки.
background: conic-gradient(from 0deg, #a855f7, #ec4899, #f59e0b, #a855f7);Синтаксис CSS-градиентов
Короткая шпаргалка по функциям и параметрам, которые собирает генератор выше. Скопируйте нужное в свой CSS.
| Функция / параметр | Что делает |
|---|---|
linear-gradient() | Линейный переход. Первым аргументом идёт угол (90deg) или направление (to right), далее цветовые точки. |
radial-gradient() | Переход от центра. Задаются форма (circle / ellipse) и позиция (at center), затем цвета. |
conic-gradient() | Вращение цветов вокруг точки. from задаёт стартовый угол, at задаёт центр вращения. |
color stops | Цветовые точки с позициями: red 0%, blue 100%. Управляют, где именно меняется цвет. |
repeating-*-gradient() | Повторяющийся узор из градиента: полоски, кольца, сектора без картинок. |
transparent / rgba() | Прозрачные точки дают затухание, скажем от цвета к прозрачности. |
Градиент или картинка
CSS-градиент почти всегда лучше картинки-фона: меньше вес, нет лишнего HTTP-запроса, масштабируется без потерь и умеет анимироваться. Подобрать цвета для точек удобно в конвертере цветов, а добавить объём элементу поможет генератор теней box-shadow.