CSS градиенты: linear, radial, conic — полное руководство

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

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

Тип	Функция	Назначение
Линейный	linear-gradient	Переход по прямой линии
Радиальный	radial-gradient	Переход от центра к краям
Конический	conic-gradient	Переход по окружности

Все градиенты задаются как значение свойства background или background-image.

linear-gradient

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

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

Направление

Направление задаётся ключевыми словами или углом.

/* Сверху вниз (по умолчанию) */
background: linear-gradient(to bottom, blue, red);

/* Слева направо */
background: linear-gradient(to right, blue, red);

/* По диагонали */
background: linear-gradient(to bottom right, blue, red);

/* Угол в градусах: 0deg = вверх, 90deg = вправо */
background: linear-gradient(45deg, blue, red);
background: linear-gradient(180deg, #fff, #000);

Цветовые остановки (color stops)

/* Два цвета, равномерный переход */
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);

/* Три и более цветов */
background: linear-gradient(90deg, red, yellow, green);

/* Позиция остановки в % или px */
background: linear-gradient(90deg, red 0%, yellow 50%, green 100%);

/* Резкая граница (без перехода) */
background: linear-gradient(90deg, red 50%, blue 50%);

Примеры

/* Градиент для кнопки */
.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Полосатый фон */
.stripes {
  background: linear-gradient(
    45deg,
    #fff 25%,
    transparent 25%,
    transparent 75%,
    #fff 75%
  );
  background-size: 20px 20px;
}

/* Стеклянный эффект (glassmorphism) */
.glass {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.05)
  );
}

radial-gradient

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

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

Форма и размер

/* Круг (по умолчанию), от центра */
background: radial-gradient(circle, red, blue);

/* Эллипс */
background: radial-gradient(ellipse, red, blue);

/* Размер: closest-side, farthest-side, closest-corner, farthest-corner */
background: radial-gradient(circle closest-side at 50% 50%, red, blue);

/* Явный размер */
background: radial-gradient(circle 100px at center, red, blue);

Позиция

/* По умолчанию center */
background: radial-gradient(circle at center, red, blue);

/* Смещённый центр */
background: radial-gradient(circle at 20% 80%, red, blue);
background: radial-gradient(circle at 100px 50px, red, blue);

Примеры

/* Световое пятно */
.spotlight {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

/* Кнопка с объёмом */
.button-3d {
  background: radial-gradient(
    ellipse at top,
    #fff,
    #ccc
  );
}

/* Солнечный диск */
.sun {
  background: radial-gradient(
    circle,
    #ffd700 0%,
    #ff8c00 50%,
    transparent 70%
  );
}

conic-gradient

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

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

Переход идёт по окружности вокруг центральной точки.

Примеры

/* Цветовой круг (3 цвета) */
.cone {
  background: conic-gradient(red, yellow, green, blue, red);
}

/* С указанием углов */
.cone {
  background: conic-gradient(
    from 0deg,
    red 0deg,
    yellow 120deg,
    green 240deg,
    red 360deg
  );
}

/* Круговая диаграмма */
.pie {
  background: conic-gradient(
    #3498db 0deg 120deg,
    #2ecc71 120deg 240deg,
    #e74c3c 240deg 360deg
  );
  border-radius: 50%;
}

/* Смещённый центр */
.cone {
  background: conic-gradient(from 0deg at 30% 30%, red, blue);
}

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

Для паттернов используются repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient.

/* Полоски */
.repeat {
  background: repeating-linear-gradient(
    90deg,
    #333 0px,
    #333 10px,
    #666 10px,
    #666 20px
  );
}

/* Концентрические круги */
.rings {
  background: repeating-radial-gradient(
    circle at center,
    #fff,
    #fff 10px,
    #000 10px,
    #000 20px
  );
}

Комбинирование градиентов

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

.overlay {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), transparent),
    linear-gradient(90deg, #667eea, #764ba2);
}

/* Шахматная доска */
.checker {
  background:
    linear-gradient(45deg, #fff 25%, transparent 25%),
    linear-gradient(-45deg, #fff 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #fff 75%),
    linear-gradient(-45deg, transparent 75%, #fff 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-color: #ccc;
}

Размер и позиция

Градиент по умолчанию заполняет весь элемент. Для управления размером и позицией используйте background-size и background-position.

.card {
  background: linear-gradient(135deg, #667eea, #764ba2);
  background-size: 200% 200%;
  background-position: 0% 50%;
}

.card:hover {
  background-position: 100% 50%;
  transition: background-position 0.5s ease;
}

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

Прямая анимация background с градиентом в CSS не интерполируется плавно во всех браузерах. Обходные пути:

1. Анимация background-position при background-size больше 100%
2. Анимация opacity наложенных градиентов
3. Использование CSS-переменных (ограниченная поддержка анимации)

.animated {
  background: linear-gradient(
    90deg,
    #667eea,
    #764ba2,
    #667eea
  );
  background-size: 200% 100%;
  animation: gradient 3s ease infinite;
}

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

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

Ручной подбор цветов и остановок занимает время. Генератор градиентов reChecker позволяет визуально настроить linear, radial и conic градиенты и получить готовый CSS.

Итог

CSS-градиенты — мощный инструмент для фонов и декора. linear-gradient — для линейных переходов, radial-gradient — для круговых и эллиптических, conic-gradient — для угловых. Комбинируйте градиенты, используйте repeating-* для паттернов и анимируйте через background-position. Для быстрой настройки применяйте визуальные генераторы.