Спокойный градиент для hero-секции
CSS
.hero { background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}Двухцветный диагональный градиент. Классический «инди-SaaS» hero — приятный для глаз и дружелюбный к тексту поверх него.
Генератор градиентов CSS
Создавайте CSS-градиенты визуально с живым кодом.
Последнее обновление
Предпросмотр2 стопов
Цветовые остановки
- 0%
- 100%
CSS
background: linear-gradient(135deg, #b18cff 0%, #5ac8c8 100%);Что такое генератор CSS-градиентов?
Генератор CSS-градиентов — это визуальный редактор для функций linear-gradient, radial-gradient и conic-gradient. Не нужно вручную подбирать координаты цветовых точек: тащите цвета по дорожке, наблюдайте за превью и копируйте готовый CSS, который сразу ложится в стили.
Градиенты сегодня встречаются повсюду: hero-секции, оверлеи на карточках, состояния кнопок, эффекты свечения, мягкие акценты в тёмной теме, скелетоны загрузки, декоративные рамки. Уметь читать и писать градиент руками полезно — но для быстрых набросков визуальный генератор вне конкуренции.
В CSS три типа градиентов. *Линейный* идёт вдоль прямой под любым углом. *Радиальный* расходится из точки кругом или эллипсом. *Конический* «вращает» цвета вокруг центра, как стрелка часов. У каждого свои сценарии — и при этом несколько градиентов можно спокойно складывать на одном фоне.
Что вы поймёте, собирая градиенты
- Градиент задаётся *направлением* (или формой) и *цветовыми точками* — цветами с необязательной позицией.
- Две точки на одной и той же позиции создают *резкую границу* — удобно для полос и разделённых фонов.
- Современные цветовые пространства вроде
oklchдают более плавные и перцептивно ровные переходы, чемrgbилиhsl.
Как собрать CSS-градиент по шагам
Выберите тип градиента
Линейный — для прямого перехода цвета, радиальный — для кругового затухания, конический — для развёртки вокруг центра.
Задайте угол или позицию
Для линейного укажите угол в градусах (
0degв CSS — это снизу вверх). Для радиального и конического задайте положение центра.Добавьте и расставьте цветовые точки
Точек может быть сколько угодно. Перетаскивайте каждую по дорожке, чтобы менять позицию. Две точки на одном месте — резкая граница.
Посмотрите на реальной форме
Переключайтесь между широким hero, карточкой и кнопкой — так видно, как градиент ложится на разные пропорции.
Скопируйте CSS
Скопируйте готовое объявление
backgroundи вставьте его в свои стили.
CSS-градиенты: краткий справочник
Три функции градиентов и их составные части. Полный справочник на MDN: linear-gradient, radial-gradient, conic-gradient.
| Функция | Что делает | Пример |
|---|---|---|
linear-gradient | Переход цвета вдоль прямой | linear-gradient(135deg, #6c8cff, #b18cff) |
radial-gradient | Цвет расходится из точки | radial-gradient(circle at 30% 20%, #fff, #000) |
conic-gradient | Цвет идёт по кругу вокруг центра | conic-gradient(from 0deg, red, yellow, red) |
repeating-linear-gradient | Повторяющийся узор из полос | repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) |
| Цветовая точка | Цвет и опциональная позиция | #6c8cff 25% |
| Жёсткая граница | Одна позиция дважды → резкий край | #000 50%, #fff 50% |
| Несколько градиентов | Складываются на одном элементе | background: g1, g2, g3; |
Примеры CSS-градиентов, которые стоит попробовать
Радиальный «прожектор»
CSS
.card { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%), #1f2230;}Полупрозрачный радиальный блик поверх однотонной заливки имитирует мягкий источник света — отлично смотрится на карточках в тёмной теме.
Полосы с резкой границей
CSS
.stripes { background: repeating-linear-gradient( 45deg, #1a1a1a 0 12px, #2a2a2a 12px 24px );}Две точки на одной позиции дают резкий край. repeating-linear-gradient повторяет рисунок плиткой по всему фону.
Типичные ошибки при работе с CSS-градиентами
- Слишком много цветовых точек. Обычно достаточно трёх–четырёх; всё, что больше, превращается в мутную кашу.
- Забывают, что
0degв CSS-градиентах — это снизу вверх (в большинстве дизайнерских инструментов 0° — это вправо). - Кладут текст на контрастный градиент, не проверив читаемость на обоих концах. Помните про контраст по WCAG.
FAQ по CSS-градиентам
Как создать CSS-градиент?
Используйте
linear-gradient, radial-gradient или conic-gradient как значение свойства background или background-image. Каждая функция принимает направление (или центр) и список цветовых точек.Чем линейный, радиальный и конический градиенты отличаются друг от друга?
Линейный ведёт цвет вдоль прямой. Радиальный расходится из точки кругом или эллипсом. Конический «вращает» цвета вокруг центра, как стрелка часов.
Можно ли анимировать CSS-градиент?
Браузеры не умеют плавно интерполировать одно градиентное изображение в другое. Стандартные приёмы: анимировать
background-position для движения, делать кроссфейд между двумя градиентными слоями через opacity или анимировать CSS custom properties, которые подставляются в цветовые точки.Почему мой градиент идёт полосами?
Полосатость (banding) появляется, когда на большой площади слишком мало дискретных цветовых шагов. Добавьте промежуточные цветовые точки, переключитесь на перцептивное цветовое пространство вроде
oklch или наложите лёгкий шум-дизеринг.CSS-градиенты поддерживаются всеми браузерами?
Линейные и радиальные градиенты поддерживаются повсеместно. Конические — во всех современных браузерах. Для совсем древних движков перед объявлением градиента стоит указать однотонный
background-color как fallback.