CSS Gradient генератор
Соберите CSS-градиент визуально — линейный, радиальный или конический — настройте цветовые точки и направление и скопируйте готовый код CSS и Tailwind.
Предварительный просмотр
background: 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.