Руководство по градиентам CSS: линейные, радиальные и конические

Градиенты CSS позволяют создавать плавные переходы между двумя и более цветами прямо в браузере без единого запроса изображения. Введённые в CSS3 и теперь повсеместно поддерживаемые, градиенты эволюционировали от простых двухостановочных затуханий до сложных визуальных элементов, способных создавать текстуры, геометрические паттерны и объёмные эффекты. Это руководство охватывает все типы CSS-градиентов, подробно объясняет синтаксис и показывает практические HEX-примеры, которые можно напрямую вставить в таблицы стилей.

Что такое CSS-градиент?

CSS-градиент — это особый тип значения <image>. Он программно генерирует цветовой переход, то есть браузер вычисляет промежуточные цвета между заданными точками остановки. Поскольку градиенты являются изображениями, а не цветами, их применяют через background-image или сокращение background, а не background-color.

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

• linear-gradient() — цвета переходят вдоль прямой линии
• radial-gradient() — цвета расходятся наружу от центральной точки
• conic-gradient() — цвета вращаются вокруг центральной точки

Каждый тип также имеет вариант repeating-* (repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()), который тайлит паттерн градиента по элементу.

Линейные градиенты

Линейный градиент рисует цветовой переход вдоль прямой линии под заданным углом.

Базовый синтаксис

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Параметр direction необязателен. Без него градиент идёт сверху вниз (эквивалент to bottom или 180deg).

/* Сверху вниз (по умолчанию) */
background: linear-gradient(#3B82F6, #1E3A8A);

/* Слева направо */
background: linear-gradient(to right, #3B82F6, #1E3A8A);

/* По диагонали */
background: linear-gradient(to bottom right, #3B82F6, #1E3A8A);

Синтаксис с углом

Углы измеряются в градусах по часовой стрелке от верхней части элемента. 0deg направлен вверх, 90deg — вправо, 180deg — вниз.

/* Диагональ 45° от нижнего левого до верхнего правого */
background: linear-gradient(45deg, #FF6B6B, #FFC300);

/* Диагональ 135° от верхнего левого до нижнего правого */
background: linear-gradient(135deg, #667EEA, #764BA2);

Типичный кейс — фон секции-героя. Например, градиент от #667EEA до #764BA2 под углом 135° создаёт прохладную фиолетовую диагональ, хорошо смотрящуюся за белым текстом.

Ключевые слова направления

Вместо углов можно использовать ключевые слова направления:

Ключевые слова более читаемы при обзорах кода и самодокументируются. Явные градусы используйте для точных углов, не попадающих на диагональ.

Несколько точек остановки цвета

Точки остановки цвета определяют, где каждый цвет начинается и заканчивается вдоль линии градиента. В качестве позиции можно использовать любую длину CSS или процент.

/* Трёхостановочный градиент */
background: linear-gradient(to right, #FF6B6B, #FFD93D, #6BCB77);

/* Позиционированные остановки */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FFD93D 50%,
  #6BCB77 100%
);

/* Жёсткая остановка цвета (без перехода) */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FF6B6B 50%,
  #6BCB77 50%,
  #6BCB77 100%
);

Техника жёсткой остановки — установка двух остановок в одном положении — создаёт чёткую границу между цветами без смешивания. Это полезно для флагоподобных дизайнов, индикаторов прогресса или разделённых фонов.

Подсказки точек остановки цвета

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

/* Градиент дольше остаётся в синем диапазоне */
background: linear-gradient(to right, #3B82F6, 30%, #EF4444);

Подсказка 30% говорит браузеру, что середина перехода между синим #3B82F6 и красным #EF4444 должна приходиться на отметку 30%, удлиняя синий и заставляя красный появляться быстрее.

Радиальные градиенты

Радиальный градиент распространяется наружу от центральной точки, создавая круговые или эллиптические паттерны.

Базовый синтаксис

background: radial-gradient(shape size at position, color-stop1, color-stop2);

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

/* Простой центральный радиальный */
background: radial-gradient(#FFF176, #F57F17);

/* Явный круг */
background: radial-gradient(circle, #A8E063, #2D6A4F);

Форма

Радиальные градиенты могут быть circle (равномерный радиус) или ellipse (по умолчанию, растягивается по элементу).

/* Круг: одинаковый радиус во всех направлениях */
background: radial-gradient(circle, #FF9A9E, #A18CD1);

/* Эллипс: растягивается по размерам элемента */
background: radial-gradient(ellipse, #FF9A9E, #A18CD1);

Ключевые слова размера

Размер управляет тем, насколько далеко простирается градиент:

/* Небольшой прожектор в верхнем левом углу */
background: radial-gradient(circle closest-side at 25% 25%,
  rgba(255,255,255,0.8),
  transparent
);

Позиция

Ключевое слово at задаёт центральную точку градиента с использованием любого допустимого значения позиции CSS:

/* Внецентровой градиент для эффекта освещения */
background: radial-gradient(circle at 70% 30%, #FFE066, #FF6B6B, #2D3561);

/* Прожектор снизу по центру */
background: radial-gradient(ellipse at 50% 100%, #667EEA, #1a1a2e);

Расположение градиентов не по центру создаёт иллюзию источника света — распространённая техника в glassmorphism и эффектах глубины.

Конические градиенты

Конический градиент вращает цвета вокруг центральной точки, аналогично рисованию круговой диаграммы. Он появился в CSS позже других типов, но теперь имеет полную поддержку браузеров.

Базовый синтаксис

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

/* Базовый конический градиент */
background: conic-gradient(#FF6B6B, #FFD93D, #6BCB77, #4D96FF, #FF6B6B);

/* Начиная с 90 градусов */
background: conic-gradient(from 90deg, #FF6B6B, #FFD93D, #6BCB77);

Круговые диаграммы с коническими градиентами

Конические градиенты идеальны для чистых CSS-круговых диаграмм:

/* Круговая диаграмма: 40% красный, 35% синий, 25% зелёный */
background: conic-gradient(
  #EF4444 0deg 144deg,
  #3B82F6 144deg 270deg,
  #22C55E 270deg 360deg
);
border-radius: 50%;

Математика проста: умножьте процент на 3,6 для получения градусов (40% × 3,6 = 144deg).

Цветовые круги с коническими градиентами

Полный конический градиент, проходящий через все оттенки, воссоздаёт цветовой круг:

background: conic-gradient(
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);
border-radius: 50%;

Паттерны шахматной доски и полос

Вариант repeating-conic-gradient() создаёт геометрические паттерны:

/* Шахматная доска */
background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
background-size: 40px 40px;

Повторяющиеся градиенты

Каждый тип градиента имеет повторяющийся вариант, который непрерывно тайлит заданный паттерн:

/* Диагональные полосы */
background: repeating-linear-gradient(
  45deg,
  #F3F4F6,
  #F3F4F6 10px,
  #E5E7EB 10px,
  #E5E7EB 20px
);

/* Концентрические кольца */
background: repeating-radial-gradient(
  circle,
  #3B82F6,
  #3B82F6 10px,
  transparent 10px,
  transparent 30px
);

Повторяющиеся градиенты эффективны для текстурных эффектов — диагональных линий типа водяных знаков на фонах или концентрических колец для прицельной эстетики.

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

Использование значений transparent или rgba() в градиентах создаёт эффекты появления и исчезновения:

/* Затухание снизу (контент ниже остаётся видимым) */
background: linear-gradient(to bottom,
  #1E3A8A 0%,
  rgba(30, 58, 138, 0) 100%
);

/* Наложение виньетки */
background: radial-gradient(ellipse at center,
  transparent 60%,
  rgba(0, 0, 0, 0.5) 100%
);

Обратите внимание, что transparent в CSS — это rgba(0,0,0,0) — полностью прозрачный чёрный, — который может создавать неожиданные серые полосы при переходе от цветного значения. Чтобы избежать этого, используйте полностью прозрачную версию вашего цвета:

/* Правильно: прозрачная версия синего */
background: linear-gradient(to right, #3B82F6, rgba(59, 130, 246, 0));

/* Неправильно: приводит к серым полосам */
background: linear-gradient(to right, #3B82F6, transparent);

Наложение нескольких градиентов

Свойство background принимает несколько значений, разделённых запятыми. Каждый градиент накладывается поверх предыдущего:

/* Диагональное наложение на сплошной цвет */
background:
  linear-gradient(135deg, rgba(255,107,107,0.3) 0%, transparent 50%),
  linear-gradient(to bottom, #1E3A8A, #2D6A9F);

/* Имитация шумовой текстуры с помощью градиентов */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  ),
  linear-gradient(135deg, #667EEA, #764BA2);

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

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

Градиенты вычисляются GPU и в целом эффективны. Однако несколько паттернов стоит избегать в производительно критичных контекстах:

• Анимированные градиенты: CSS не может переходить между двумя разными значениями background-image. Анимация градиентов требует либо изменения пользовательских свойств CSS (переменных), либо JavaScript. Обходной путь — анимация background-position на бо́льшем градиенте.
• Сложные повторяющиеся паттерны: очень маленькие размеры повтора (менее 2px) на больших элементах заставляют браузер вычислять тысячи пикселей градиента, что может вызвать проблемы с производительностью отрисовки.
• Избегайте filter: blur() на фонах с градиентом во время анимации — это затратно для GPU и вызывает рывки.

Для анимации градиента использование пользовательских свойств CSS с @property обеспечивает аппаратно-ускоренные плавные переходы:

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.animated-gradient {
  background: linear-gradient(var(--gradient-angle), #667EEA, #764BA2);
  animation: rotate-gradient 4s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

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

Хотя написание градиентов вручную ценно для понимания синтаксиса, Генератор градиентов существенно ускоряет процесс. С его помощью можно:

• Выбирать начальный и конечный цвета с помощью визуального выборщика цвета или вводя HEX-коды напрямую
• Устанавливать угол градиента с помощью слайдера или числового ввода
• Добавлять несколько точек остановки цвета в точных позициях
• Просматривать градиент в реальном времени на разных размерах элементов
• Копировать готовый CSS одним кликом

Например, чтобы создать закатный градиент, введите #FF6B6B как начальный цвет, #FFC300 на 50% и #FF3C00 как конечный, затем установите угол 135 градусов. Генератор создаёт готовый к использованию CSS, который можно вставить прямо в таблицу стилей.

Сочетайте генератор с Конвертером цветов при работе с HSL или OKLCH-значениями вместо HEX — современные цветовые пространства как OKLCH создают более перцептуально равномерные градиенты, поскольку ось светлоты действительно равномерна для всех оттенков.

Практические рецепты градиентов

Фон секции-героя

background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);

Глубокая фиолетово-синяя диагональ, подходящая для лендингов SaaS.

Эффект наведения карточки

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

Тонкий светло-голубовато-серый градиент от #F5F7FA до #C3CFE2.

Неоновая светящаяся кнопка

background: linear-gradient(to right, #11998e, #38ef7d);
box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);

Яркий зелёный от #11998E до #38EF7D.

Поверхность тёмного режима

background: linear-gradient(145deg, #1E1E2E 0%, #2D2D44 100%);

Тонкий тёмный фиолетово-синий для поверхностей карточек в тёмном режиме.

Сетчатый градиент (аппроксимация слоями)

background:
  radial-gradient(ellipse at 20% 20%, rgba(103,126,234,0.5), transparent 50%),
  radial-gradient(ellipse at 80% 80%, rgba(118,75,162,0.5), transparent 50%),
  radial-gradient(ellipse at 50% 50%, rgba(255,107,107,0.3), transparent 60%),
  #1a1a2e;

Ключевые выводы

• CSS предлагает три типа градиентов: linear-gradient() для переходов вдоль прямой линии, radial-gradient() для круговых или эллиптических паттернов и conic-gradient() для вращений вокруг центральной точки в стиле круговой диаграммы.
• Каждый тип имеет вариант repeating-*, тайлящий паттерн градиента — полезно для текстурных эффектов, полос и геометрических паттернов.
• Несколько точек остановки цвета с позициями в процентах или пикселях дают точный контроль над местами переходов; использование одной позиции для двух остановок создаёт чёткую границу без смешивания.
• Используйте rgba() с нулевым альфа (не голое ключевое слово transparent) для предотвращения серых полос при затухании цвета к прозрачности.
• Несколько градиентов можно наслаивать в одном объявлении background, каждый расположен поверх предыдущего.
• Генератор градиентов позволяет создавать сложные градиенты визуально с предпросмотром в реальном времени и экспортом CSS одним кликом.