Генератор CSS-градиентов
Создайте градиент и скопируйте готовый CSS-код.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
Идеальный градиент без единой строки CSS
Градиенты повсюду в современном дизайне: фоны hero-блоков, кнопки, карточки, декоративный текст. Этот генератор позволяет собирать их визуально — цвета, позиции, угол, тип — и копировать чистый CSS-код, готовый к продакшену.
-
Выберите тип
Линейный — для направленного перехода, радиальный — для центрального ореола, конический — для эффектов колеса или диаграммы.
-
Настройте цвета и позиции
Меняйте каждый цвет в палитре, двигайте позицию ползунком, добавляйте до 6 точек. Кнопка «Случайный» предлагает гармоничные комбинации.
-
Скопируйте CSS
Код обновляется в реальном времени. Один клик — и он в буфере обмена.
Три функции — три геометрии
| Функция | Геометрия | Типичное применение |
|---|---|---|
| linear-gradient(угол, …) | Направленная прямая | Фоны, кнопки, оверлеи |
| radial-gradient(circle, …) | Концентрические круги | Ореолы, прожекторы, виньетки |
| conic-gradient(from угол, …) | Вращение вокруг центра | Круговые диаграммы, цветовые круги, анимированные рамки |
Советы для удачных градиентов
- Держитесь соседних (аналоговых) оттенков для мягкого результата; противоположные оттенки проходят через тусклые серые зоны.
- Для градиентного текста сочетайте background-clip: text и color: transparent.
- На больших поверхностях добавьте лёгкий шум, чтобы избежать видимых полос (бандинга).
- Следите за контрастом: текст на градиенте должен оставаться читаемым во всём диапазоне цветов.
Сгенерированный код использует шестнадцатеричные цвета для максимальной совместимости. В проекте их можно заменить CSS-переменными (var(--my-color)).
Частые вопросы
В чём разница между linear, radial и conic?
linear-gradient идёт по прямой под заданным углом; radial-gradient расходится из центра наружу; conic-gradient вращается вокруг центра, как цветовой круг. Все три принимают одинаковые списки цветов.
Сколько цветов можно использовать?
Инструмент поддерживает до 6 точек, чего хватает почти для всех задач. В чистом CSS количество не ограничено, но при более чем 4–5 цветах градиентом становится трудно управлять.
Что означают проценты рядом с цветами?
Это позиция точки вдоль оси градиента: 0 % — начало, 100 % — конец. Две близкие точки дают резкий переход, две далёкие — плавное смешение.
Работает ли сгенерированный код во всех браузерах?
linear-gradient и radial-gradient поддерживаются повсеместно уже много лет. conic-gradient доступен во всех современных браузерах (Chrome 69+, Firefox 83+, Safari 12.1+).
Как анимировать CSS-градиент?
Градиенты напрямую не анимируются, но хорошо работают два приёма: анимация background-position у увеличенного градиента (background-size: 200 %) или анимация цветов через кастомные свойства, зарегистрированные с помощью @property.