CSS градиенты: linear, radial, conic

Введение

Градиенты — один из самых выразительных инструментов в арсенале фронтенд-разработчика. Они заменяют фоновые изображения, ускоряют загрузку страницы и позволяют создавать плавные переходы между цветами без единого растрового файла. CSS поддерживает три типа градиентов — linear, radial и conic — и каждый из них решает свой класс задач. В этой статье разберём синтаксис всех трёх типов, научимся строить сложные многоцветные переходы, повторяющиеся градиенты и анимации. Для быстрой генерации готового CSS-кода используйте нашгенератор CSS-градиентов — он работает прямо в браузере.

Линейные градиенты: linear-gradient

Самый распространённый тип — линейный градиент. Цвета в нём перетекают по прямой линии под заданным углом. Синтаксис функцииlinear-gradient() выглядит так:

background: linear-gradient(
  направление,
  цвет1,
  цвет2,
  ...
);

Направление можно задать двумя способами — ключевым словом или углом. Ключевые слова описывают сторону, откуда начинается градиент:to top, to right, to bottom,to left. Углы измеряются от вертикальной оси по часовой стрелке: 0deg = вверх, 90deg = вправо,180deg = вниз.

/* Простой вертикальный градиент */
background: linear-gradient(to bottom, #ff5733, #ffffff);

/* Диагональный градиент под углом 45° */
background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);

/* Градиент с тремя цветами */
background: linear-gradient(
  90deg,
  #ff5733,
  #ffbd69,
  #ffffff
);

Цветовые остановки

Каждый цвет можно дополнить позицией — это цветовая остановка (color stop). Позиция задаётся в процентах или пикселях и указывает, где цвет достигает своей чистоты. Без явной позиции браузер распределит цвета равномерно.

/* Резкий переход посередине */
background: linear-gradient(
  to right,
  #4facfe 0%,
  #4facfe 50%,
  #00f2fe 50%,
  #00f2fe 100%
);

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

Подсказка о темпе перехода: color hint

Между двумя цветами можно поставить числовое значение — точку, где «средний» цвет будет располагаться. Это управляет темпом перехода:

/* Средний цвет смещён к 25% — переход быстрее в начале */
background: linear-gradient(to right, #4facfe, 25%, #00f2fe);

Радиальные градиенты: radial-gradient

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

background: radial-gradient(
  форма размер at позиция,
  цвет1,
  цвет2,
  ...
);

Форма бывает двух типов: circle (круг) иellipse (эллипс, значение по умолчанию). Размер задаётся ключевым словом (closest-side,farthest-corner и др.) или конкретными значениями:

/* Круглый градиент в центре */
background: radial-gradient(
  circle at center,
  #ffffff,
  #ff5733
);

/* Эллипс от левого верхнего угла */
background: radial-gradient(
  ellipse at top left,
  #4facfe,
  #00f2fe 50%,
  transparent
);

/* Круг фиксированного радиуса */
background: radial-gradient(
  circle 200px at 50% 50%,
  #ff5733,
  transparent
);

Радиальные градиенты отлично подходят для имитации прожекторов, теней, световых бликов и фоновых «гало» в hero-секциях.

Конические градиенты: conic-gradient

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

background: conic-gradient(
  from угол at позиция,
  цвет1,
  цвет2,
  ...
);

/* Цветовой круг из 6 цветов */
background: conic-gradient(
  from 0deg at 50% 50%,
  #ff5733,
  #ffbd69,
  #75ff69,
  #69c5ff,
  #9b69ff,
  #ff5733
);

Конические градиенты идеально подходят для создания круговых диаграмм, пь-чартов, индикаторов прогресса и имитации CD-дисков. В сочетании с масками и border-radius можно строить сложные декоративные элементы.

/* Кольцевой прогресс-бар */
.progress-ring {
  background: conic-gradient(
    #4facfe 0deg 270deg,
    #e5e7eb 270deg 360deg
  );
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

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

У каждого типа градиента есть «повторяющийся» собрат:repeating-linear-gradient,repeating-radial-gradient,repeating-conic-gradient. Они повторяют шаблон, если сумма позиций меньше 100%. Это удобно для создания полос, узоров и текстур:

/* Полосатый фон */
background: repeating-linear-gradient(
  45deg,
  #4facfe 0,
  #4facfe 10px,
  #ffffff 10px,
  #ffffff 20px
);

/* Концентрические круги */
background: repeating-radial-gradient(
  circle at center,
  #ff5733 0,
  #ff5733 20px,
  #ffffff 20px,
  #ffffff 40px
);

Многослойные фоны

CSS допускает несколько фоновых слоёв в одном правиле — они накладываются сверху вниз. Это позволяет комбинировать градиенты с изображениями и создавать сложные эффекты без лишних DOM-элементов.

background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
  url('/hero.jpg');
background-size: cover;
background-position: center;

Слой градиента сверху затемняет фото, чтобы белый текст был читаемым. При этом грузится только одно изображение.

Применение градиентов в интерфейсе

Кнопки с акцентом

.btn-primary {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  transition: filter 0.2s ease;
}
.btn-primary:hover {
  filter: brightness(1.1);
}

Карточки с подсветкой

.card {
  background:
    radial-gradient(circle at top right, rgba(79, 172, 254, 0.15), transparent 60%),
    #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
}

Скелетоны и шиммер-эффекты

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    #e5e7eb 25%,
    #f3f4f6 50%,
    #e5e7eb 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

Анимация градиентов

Сам по себе градиент анимировать через transition нельзя — CSS не интерполирует функцию gradient(). Но можно анимировать background-position илиbackground-size:

@keyframes gradient-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-gradient {
  background: linear-gradient(
    90deg,
    #4facfe,
    #00f2fe,
    #ff5733,
    #4facfe
  );
  background-size: 300% 100%;
  animation: gradient-flow 8s ease infinite;
}

Для анимации самих цветов используется CSS Houdini (@property) — это позволяет интерполировать цвета градиента напрямую, но поддерживается не во всех браузерах.

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

Градиенты в CSS рисуются на GPU — это быстро. Но есть несколько правил, чтобы не получить тормоза на слабых устройствах:

• Избегайте слишком большого числа цветовых остановок (больше 8–10).
• Не анимируйте градиент на каждом кадре без необходимости.
• Используйте will-change: background-position для анимированных градиентов.
• Помните, что background-size: cover с градиентом может быть дороже, чем фиксированный размер.

Совместимость и фолбэки

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

background: #4facfe; /* фолбэк */
background: linear-gradient(135deg, #4facfe, #00f2fe);

Инструменты для работы с градиентами

• Генератор CSS-градиентов— визуальный конструктор с экспортом готового CSS.
• Генератор палитры — подбор гармоничных цветов для градиента.
• Проверка контраста — убедитесь, что текст на градиенте читаем.

Заключение

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