CSS Gradient
Войдите или зарегистрируйтесь, чтобы сохранять инструменты в избранное
Генератор CSS-градиентов с визуальным редактором
Linear gradient — линейный градиент с задаваемым углом направления.
Radial gradient — радиальный градиент от центра к краям.
Conic gradient — конический градиент (вращение цвета вокруг центра).
Можно добавить до 5 цветовых точек. Для каждой точки задаётся цвет и позиция (0-100%).
Используйте пресеты для быстрого старта или кнопку «Случайный» для генерации случайного градиента.
Генератор CSS-градиентов онлайн — linear, radial, conic
Визуальный редактор CSS-градиентов с поддержкой трёх типов (линейный, радиальный, конический), 18 готовых пресетов, случайной генерацией и мгновенным копированием CSS-кода. Создавайте градиенты для фонов, кнопок, иконок и любых UI-элементов.
Типы CSS-градиентов
| Тип | Функция CSS | Описание |
|---|---|---|
| Линейный | linear-gradient() | Переход вдоль прямой линии под заданным углом |
| Радиальный | radial-gradient() | Переход от центра к краям по кругу или эллипсу |
| Конический | conic-gradient() | Переход вдоль угла (как срез пирога). Отлично для pie-charts |
Синтаксис CSS-градиентов
Линейный: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
Радиальный: radial-gradient(circle at center, #f093fb 0%, #f5576c 100%)
Конический: conic-gradient(from 0deg, #ff6b6b, #feca57, #48dbfb, #ff6b6b)
Значение 135deg задаёт угол линейного градиента (0deg = снизу вверх, 90deg = слева направо, 180deg = сверху вниз).
Color stops и позиции
Color stop — это цвет и его позиция в процентах вдоль градиента. Можно использовать несколько остановок: linear-gradient(90deg, #red 0%, #orange 25%, #yellow 50%, #green 75%, #blue 100%). Если позиция не указана, браузер распределяет остановки равномерно.
Часто задаваемые вопросы
Поддерживают ли браузеры conic-gradient?
Да, все современные браузеры. Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+. IE не поддерживает.
Как использовать градиент как фон?background: linear-gradient(...); или background-image: linear-gradient(...); — оба варианта работают. Для анимации лучше менять background-position на расширенном фоне.
Можно ли накладывать несколько градиентов?
Да: background: linear-gradient(...), radial-gradient(...); — градиенты накладываются как слои (первый — поверх).
Как анимировать градиент?
Прямая анимация background CSS-анимацией не работает в большинстве браузеров. Решения: анимация через background-position на большом фоне или через filter: hue-rotate().
Для теней используйте CSS Shadow, для скругления — CSS Border Radius, для выбора цветов — Color Picker.
Полезные статьи
WCAG контрастность: доступность цветов в веб-дизайне
Как проверить контрастность цветов по стандарту WCAG 2.1. Уровни AA и AAA, формула расчёта, рекомендации.
CSS Border Radius: скругление углов элементов
Как использовать border-radius: синтаксис, сокращённая запись, эллиптические углы. Генератор border-radius онлайн.