CSS gradient — линейный и радиальный градиент

CSS позволяет создавать градиенты без единого изображения — прямо через код. linear-gradient — линейный переход цветов, radial-gradient — круговой, conic-gradient — угловой. Разбираем синтаксис и даём готовые примеры.

CSS linear-gradient — линейный градиент

Линейный градиент — плавный переход от одного цвета к другому по прямой линии. Направление настраивается ключевыми словами или градусами.

/* Базовый: сверху вниз (по умолчанию) */
background: linear-gradient(#667eea, #764ba2);

/* Направление через ключевые слова */
background: linear-gradient(to right, #667eea, #764ba2);      /* → */
background: linear-gradient(to left, #667eea, #764ba2);       /* ← */
background: linear-gradient(to bottom, #667eea, #764ba2);     /* ↓ */
background: linear-gradient(to bottom right, #667eea, #764ba2); /* ↘ */

/* Направление через градусы */
background: linear-gradient(45deg,  #667eea, #764ba2);  /* диагональ */
background: linear-gradient(135deg, #667eea, #764ba2);  /* обратная диагональ */
background: linear-gradient(90deg,  #667eea, #764ba2);  /* горизонтально */
background: linear-gradient(0deg,   #667eea, #764ba2);  /* вертикально */

/* Три цвета и больше */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe);
background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fad0c4, #a18cd1);

/* RGBA — с прозрачностью */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));

Позиции остановок цвета (color stops)

/* По умолчанию цвета распределены равномерно */
background: linear-gradient(to right, red, blue);
/* red от 0%, blue к 100% — плавный переход */

/* Задать позиции вручную */
background: linear-gradient(to right,
  red    0%,     /* красный с самого начала */
  red    40%,    /* оставаться красным до 40% */
  blue   60%,    /* начать синий с 60% */
  blue   100%    /* синий до конца */
);
/* Результат: чёткая граница между красным и синим посередине */

/* Резкая граница без перехода */
background: linear-gradient(to right,
  red  50%,
  blue 50%    /* два цвета встречаются ровно в 50% */
);

/* Шахматный узор (продвинутый CSS) */
background:
  linear-gradient(45deg,  #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg,  transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 20px 20px;

CSS radial-gradient — радиальный градиент

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

/* Базовый: из центра, эллипс (по умолчанию) */
background: radial-gradient(#667eea, #764ba2);

/* Форма */
background: radial-gradient(circle,  #667eea, #764ba2); /* круг */
background: radial-gradient(ellipse, #667eea, #764ba2); /* эллипс */

/* Позиция центра */
background: radial-gradient(circle at center,     #667eea, #764ba2);
background: radial-gradient(circle at top left,   #667eea, #764ba2);
background: radial-gradient(circle at 30% 70%,    #667eea, #764ba2);
background: radial-gradient(circle at 80px 60px,  #667eea, #764ba2);

/* Размер */
background: radial-gradient(circle closest-side,    #fff, #000); /* до ближайшей стороны */
background: radial-gradient(circle farthest-corner, #fff, #000); /* до дальнего угла */
background: radial-gradient(100px 80px at center,   #fff, #000); /* точный размер */

/* Практический пример: свечение */
.glow {
  background: radial-gradient(circle at center,
    rgba(103, 126, 234, 0.3) 0%,
    rgba(103, 126, 234, 0.0) 70%
  );
}

CSS conic-gradient — конический (угловой) градиент

Конический градиент вращается вокруг центральной точки — как стрелка часов. Идеален для круговых диаграмм и цветовых колёс.

/* Простой конический градиент */
background: conic-gradient(red, yellow, green, blue, red);

/* Цветовое колесо */
.color-wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    red, yellow, lime, cyan, blue, magenta, red
  );
}

/* Круговая диаграмма (pie chart) */
.pie-33-50-17 {
  background: conic-gradient(
    #2563eb  0%  33%,   /* синий: 33% */
    #16a34a 33%  83%,   /* зелёный: 50% */
    #dc2626 83% 100%    /* красный: 17% */
  );
  border-radius: 50%;
}

/* С углом поворота */
background: conic-gradient(from 45deg,  red, blue);
background: conic-gradient(from 180deg, red, yellow, green);

/* Кастомная позиция центра */
background: conic-gradient(from 0deg at 30% 50%, red, blue);

Градиент поверх картинки

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

/* Hero-секция с затемнением снизу */
.hero {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1) 0%,    /* верх: почти прозрачный */
      rgba(0, 0, 0, 0.7) 100%   /* низ: тёмный */
    ),
    url('hero.jpg') center/cover no-repeat;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 60px;
}

/* Равномерное затемнение */
.card-image {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('photo.jpg') center/cover;
}

/* Сбоку — для текстовых оверлеев */
.promo-banner {
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.8) 0%,
      rgba(0,0,0,0.3) 50%,
      rgba(0,0,0,0.0) 100%
    ),
    url('banner.jpg') center/cover;
}

Готовые красивые CSS градиенты для копирования

Эти градиенты можно использовать сразу в проекте — просто скопируй нужный.

/* Ocean Blue */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Sunset */
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

/* Fresh Mint */
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);

/* Midnight */
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);

/* Warm Flame */
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);

/* Deep Space */
background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);

/* Aurora */
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);

/* Peach */
background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%);

/* Aqua Blue */
background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);

/* Royal */
background: linear-gradient(135deg, #141e30 0%, #243b55 100%);

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

Градиент можно анимировать, сдвигая фоновую позицию большого градиента. Это создаёт эффект плавно меняющегося фона.

.animated-gradient {
  background: linear-gradient(270deg, #667eea, #764ba2, #f5576c, #667eea);
  background-size: 400% 400%;  /* увеличиваем фон чтобы было куда сдвигаться */
  animation: gradient-shift 6s ease infinite;
}

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

/* Более плавный вариант */
.button-gradient {
  background: linear-gradient(135deg, #667eea, #764ba2);
  transition: background-position 0.3s ease;
  background-size: 200% 200%;
  background-position: left center;
}

.button-gradient:hover {
  background-position: right center; /* сдвигает градиент при hover */
}

Часто задаваемые вопросы о CSS градиентах

Как сделать прозрачный градиент в CSS?

Используй rgba или transparent как один из цветов. Пример: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)) — переход от полностью прозрачного к красному. Или: linear-gradient(to bottom, black, transparent) — от чёрного к прозрачному. Это часто используют чтобы текст читался поверх картинки.

Какой CSS gradient generator использовать?

Лучшие онлайн-генераторы CSS градиентов: cssgradient.io — визуальный редактор с полным контролем над остановками цветов; uigradients.com — коллекция готовых красивых градиентов; Chrome DevTools — клик на квадратик градиента в панели стилей открывает встроенный редактор прямо в браузере.

Почему CSS gradient не работает как background-color?

Градиент в CSS — это background-image, а не background-color. Пиши background: linear-gradient(...) или background-image: linear-gradient(...). Если написать background-color: linear-gradient(...) — не сработает. Кроме того, background-color рисуется под background-image, поэтому их можно комбинировать: задать цвет фолбэка через background-color и градиент через background-image.