Как создать CSS-градиенты

linear-gradient. Самый распространённый тип. Переход цвета вдоль прямой линии. Вы можете управлять направлением (сверху вниз, слева направо, произвольный угол) и добавлять любое количество цветовых стопов.

radial-gradient. Цвета излучаются из центральной точки наружу, в виде круга или эллипса. Идеален для создания световых эффектов, светящихся кнопок или тонких фонов.

conic-gradient. Цвета вращаются вокруг центральной точки, как секторы цветового круга. Идеален для круговых диаграмм, индикаторов или радужных эффектов.

repeating-linear-gradient / repeating-radial-gradient. Повторяющиеся версии, идеальные для создания полосатых узоров или текстур.

Аналоговые цвета. Выбирайте соседние цвета на цветовом круге (синий → фиолетовый, оранжевый → красный). Переходы естественно гармоничны и плавны.

Комплементарные цвета. Противоположные цвета на круге (синий → оранжевый). Осторожно: прямой переход может создать серую зону посередине. Добавьте промежуточный цвет, чтобы этого избежать.

Монохром. Вариации одного оттенка (светло-синий → тёмно-синий). Всегда элегантно и профессионально. Идеально для тонких фонов.

Избегайте резких переходов. Чем дальше цвета на круге, тем больше промежуточных стопов нужно для сглаживания перехода.

Совет про: используйте цветовое пространство oklch() для перцептивно равномерных переходов. Градиенты в oklch более естественны, чем в RGB.

Шаг 1: Выберите тип. Линейный, радиальный или конический. У каждого типа свои настройки.

Шаг 2: Выберите цвета. Используйте палитру для выбора стопов. Добавляйте, удаляйте или переупорядочивайте стопы одним кликом.

Шаг 3: Настройте направление и позиции. Измените угол, начальную точку и точную позицию каждого стопа для полного контроля.

Шаг 4: Скопируйте CSS-код. CSS-код генерируется в реальном времени. Скопируйте и вставьте прямо в таблицу стилей.

Предпросмотр в реальном времени, история градиентов и предложения популярных палитр включены.

Фоны секций. Тонкий градиент между двумя близкими тонами добавляет глубину, не отвлекая от контента. Самое распространённое применение в современном веб-дизайне.

Кнопки и CTA. Градиент делает кнопки более динамичными и привлекательными, чем плоский цвет. Добавьте лёгкое изменение градиента при наведении для приятного эффекта.

Градиентный текст. С background-clip: text вы можете применить градиент прямо к тексту. Очень модно для заголовков и логотипов.

Наложения на изображения. Полупрозрачный градиент поверх изображения улучшает читаемость наложенного текста.

Рамки. Border-image с градиентом создаёт цветные рамки, невозможные с обычным border-color.

CSS-градиенты производительны. В отличие от изображений, они векторные (без пикселизации), лёгкие (несколько байт кода против КБ изображения) и рендерятся GPU.

Предпочитайте CSS изображениям. CSS-градиент всегда быстрее загружается и чётче, чем изображение градиента. Он также естественно адаптируется к любым размерам экрана.

Ограничьте количество стопов. Более 4-5 стопов усложняет код и затрудняет предпросмотр. Для очень сложных градиентов рассмотрите SVG.

Тестируйте на мобильных. Градиенты могут выглядеть по-разному на экранах OLED и LCD. Всегда тестируйте на нескольких типах экранов.

Доступность. Убедитесь, что текст на градиентном фоне остаётся читаемым во всех точках. Проверяйте контраст WCAG на каждом конце градиента.