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

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

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

Самый распространённый тип, создающий переход вдоль прямой линии:

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

/* С заданным углом */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* С ключевыми словами направления */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

Цветовые точки

Управляйте позицией каждого цвета:

/* Равномерное распределение (по умолчанию) */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* Пользовательские позиции */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* Жёсткая граница (без перехода) */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

Многоцветные градиенты

Создавайте сложные цветовые переходы:

/* Градиент заката */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* Радуга */
background: linear-gradient(
  90deg,
  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%)
);

Создавайте линейные градиенты визуально с помощью нашего Генератора градиентов — настраивайте цвета, углы и точки в реальном времени.

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

Распространяются наружу от центральной точки:

/* Круг из центра */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* Эллипс (форма по умолчанию) */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* Пользовательская позиция */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

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

/* closest-side: градиент доходит до ближайшей стороны */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner: градиент доходит до дальнего угла (по умолчанию) */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* Явный размер */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

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

Вращаются вокруг центральной точки, как круговая диаграмма:

/* Базовый конический */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* Секторы круговой диаграммы */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* С определённого угла */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

/* Пользовательский центр */
background: conic-gradient(from 0deg at 25% 50%, #3B82F6, #8B5CF6, #3B82F6);

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

Все три типа поддерживают повторяющиеся паттерны:

/* Полосатый паттерн */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

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

/* Шахматная доска (с помощью конического) */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

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

CSS поддерживает множественные фоны, что позволяет создавать сложные эффекты:

/* Градиентное наложение на изображение */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* Паттерн перекрёстной штриховки */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  );

Практические UI-паттерны

Градиентный текст

.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Градиентные рамки

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #3B82F6, #EC4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Анимированный градиентный фон

.animated-gradient {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Вопросы производительности

Градиенты ускоряются GPU и производительны:

• Градиенты рендерятся быстрее, чем эквивалентные изображения
• background-size влияет на стоимость рендеринга — маленькие плитки дешевле
• Избегайте прямой анимации цветов градиента — вместо этого анимируйте background-position
• Сложные градиенты с множеством точек всё равно быстрее PNG

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

Все современные браузеры поддерживают линейные, радиальные и конические градиенты. Конические градиенты — самые новые, поддерживаются с 2020 года во всех основных браузерах (Chrome 69+, Firefox 83+, Safari 12.1+). Вендорные префиксы не нужны ни для одного типа градиентов.

FAQ

Как создать плавный градиент между двумя цветами, которые выглядят мутно?

Мутные градиенты возникают при переходе между цветами, путь которых проходит через серый на цветовом круге. Решения: добавьте промежуточную цветовую точку в середине с более ярким оттенком, используйте цветовое пространство oklch (linear-gradient(in oklch, ...)) для перцептивно равномерных переходов или увеличьте насыщенность срединного цвета.

Могут ли градиенты заменить изображения для фонов?

Для абстрактных паттернов, наложений и декоративных фонов — безусловно. Градиенты загружаются мгновенно, масштабируются идеально и не требуют HTTP-запросов. Для сложных визуальных эффектов или фотографий изображения по-прежнему необходимы. Многие современные дизайны комбинируют оба подхода: градиентное наложение на фоновое изображение.

Связанные ресурсы

• Генератор градиентов — Создавайте CSS-градиенты визуально
• Советы по дизайну цветовых палитр — Выбирайте цвета для ваших градиентов
• Цветовые форматы: подробное объяснение — Разберитесь в цветовой нотации CSS