Генератор CSS-градиента онлайн

CSS-градиенты

CSS-градиенты позволяют создать плавные переходы между цветами без изображений. Это экономит HTTP-запросы, масштабируется без потерь и анимируется через CSS transitions.

Linear — переход по прямой линии под заданным углом. Radial — переход от центра к краям. Conic — переход по кругу (как в круговой диаграмме).

Для генерации паролей используйте генератор паролей. Для форматирования CSS-конфигов — JSON форматтер.

Типы CSS-градиентов

CSS предлагает три основных типа градиентов и их повторяющиеся варианты:

linear-gradient — переход цветов вдоль прямой линии. Самый популярный тип. Задаётся направление (угол или ключевое слово) и цветовые точки. Пример: background: linear-gradient(90deg, #4361ee, #6b7fff) — горизонтальный переход от синего к голубому.

radial-gradient — переход от центра к краям. По умолчанию — эллипс, можно задать круг: radial-gradient(circle, #fff, #000). Используется для эффектов свечения, виньетки, фокусировки внимания.

conic-gradient — переход по углу вокруг центральной точки, как сектора круговой диаграммы. conic-gradient(#ff0, #0f0, #00f, #ff0) создаёт радужный круг. Появился позже остальных — с 2020 года поддерживается всеми основными браузерами.

repeating-* — повторяющиеся варианты каждого типа. Позволяют создавать полосатые паттерны: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) — диагональные чёрно-белые полосы шириной 10 пикселей.

Синтаксис linear-gradient

Линейный градиент принимает направление и список цветовых точек (color stops):

Направление. Задаётся углом в градусах или ключевым словом. 0deg (или to top) — снизу вверх. 90deg (или to right) — слева направо. 180deg (или to bottom) — сверху вниз (значение по умолчанию). 45deg — по диагонали. Можно комбинировать: to bottom right.

Цветовые точки. Указывают цвет и позицию в процентах или пикселях: linear-gradient(90deg, #4361ee 0%, #6b7fff 50%, #fff 100%). Если позиции не указаны, цвета распределяются равномерно.

Резкие переходы. Два цвета на одной позиции создают чёткую границу: linear-gradient(90deg, red 50%, blue 50%) — половина красная, половина синяя, без плавного перехода. Это используется для создания флагов, индикаторов и прогресс-баров.

Прозрачность. Один из цветов может быть прозрачным: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent) — затемнение сверху вниз. Классический приём для текста поверх изображений.

Градиенты в веб-дизайне

Градиенты — один из самых универсальных инструментов в CSS. Вот популярные приёмы:

Фоны секций и кнопок. Однотонные фоны выглядят плоско. Градиент добавляет глубину без сложной графики. Кнопка с градиентом от #4361ee к #6b7fff выглядит объёмнее, чем просто синяя.

Текстовый градиент. CSS-свойства background-clip: text и -webkit-text-fill-color: transparent позволяют залить текст градиентом. Эффектно для заголовков и логотипов.

Overlay на изображениях. Полупрозрачный градиент поверх фото улучшает читаемость текста: background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.3)), url(photo.jpg). Используется на hero-секциях и карточках.

Градиентные рамки. Через border-image: linear-gradient(...) 1 или через background + padding + background-clip можно создать рамку с градиентом — эффект, который невозможен с обычным border-color.

Анимированные градиенты. CSS не анимирует background-image напрямую, но можно анимировать background-position на увеличенном фоне. Или использовать CSS @property для плавной анимации цветовых точек.

Поддержка браузерами

CSS-градиенты поддерживаются всеми современными браузерами без вендорных префиксов:

linear-gradient и radial-gradient — с 2012-2013 года. Префиксы -webkit- и -moz- не нужны уже более 10 лет. conic-gradient — с 2020 года (Chrome 69, Firefox 83, Safari 12.1).

repeating-linear-gradient и repeating-radial-gradient поддерживаются так же давно, как и базовые варианты. Глобальная поддержка — более 97% пользователей.

Единственное ограничение — CSS @property для анимации градиентов. На момент 2026 года он поддерживается в Chrome, Edge, Safari 15.4+, Firefox 128+. Для анимации можно использовать fallback через background-size и background-position.

Производительность градиентов

CSS-градиенты рендерятся GPU, а не процессором. Это делает их быстрее растровых изображений для простых паттернов. Преимущества:

Нет HTTP-запроса. Градиент описывается в CSS — браузеру не нужно загружать файл с сервера. Для фонов секций это экономит 5-50 КБ и один запрос.

Масштабируемость. Градиент выглядит идеально на любом разрешении — от мобильного до Retina 5K. Растровый фон пикселизируется или требует нескольких версий через srcset.

Размер CSS. Градиент занимает 50-100 байт в CSS. PNG-фон с тем же эффектом — 5-50 КБ. Для страниц с несколькими фоновыми секциями разница существенна.

Совет: сложные градиенты с 10+ цветовыми точками или анимацией на мобильных устройствах могут вызывать микролаги. Используйте will-change: background для подсказки браузеру, но не злоупотребляйте.

Для генерации QR-кодов с вашими фирменными цветами используйте генератор QR-кода. А для форматирования CSS-переменных в JSON — JSON форматтер.

Встроить на свой сайт