Исполняемые доки CSS: Градиент CSS

Q: Как сделать радиальный градиент в CSS?

Используйте background-image: radial-gradient(#93c5fd, #1e3a8a);. Перед цветами можно добавить форму и позицию, например radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Q: Чем circle отличается от ellipse в radial-gradient?

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

Q: Как задать направление линейного градиента?

Поставьте первым направление или угол: linear-gradient(to right, red, blue) или linear-gradient(45deg, red, blue). По умолчанию to bottom (180deg); 0deg направлен вверх, а углы идут по часовой стрелке.

Q: Как сделать резкие полосы вместо плавного перехода?

Задайте двум цветам одну и ту же позицию: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) меняет цвет посередине без перехода. repeating-linear-gradient повторяет узор из таких точек.

Q: Можно ли использовать градиент как background-color?

Нет. Градиент это изображение, поэтому он пишется в background-image или в сокращенном свойстве background. background-color: linear-gradient(...) невалидно и игнорируется.

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

radial-gradient() смешивает цвета наружу от центральной точки. Как и любой градиент CSS, это изображение, поэтому он пишется в background-image (или в сокращенном свойстве background):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

Полный синтаксис: radial-gradient(shape size at position, color stops). Все, что перед цветами, необязательно.

Часть	Значения	По умолчанию
Форма	`circle`, `ellipse`	`ellipse`
Размер	`closest-side`, `closest-corner`, `farthest-side`, `farthest-corner` или длины	`farthest-corner`
Позиция	`at center`, `at top left`, `at 30% 70%`, `at 20px 40px`	`at center`
Цветовые точки	Два и больше цветов, у каждого необязательная позиция

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Попробуйте circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a и circle 40px, #f59e0b 99%, transparent (точка с резким краем).

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

linear-gradient() смешивает цвета вдоль прямой линии. Сначала направление или угол, затем цвета:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

Углы начинаются с 0deg, направленного вверх, и идут по часовой стрелке, поэтому 90deg это to right, а 180deg это to bottom по умолчанию. to right остается физическим и на страницах справа налево; отразите его сами, если градиент должен следовать направлению чтения.

Цветовые точки и резкие переходы

У каждого цвета может быть позиция. Без позиций цвета распределяются равномерно. Когда у двух цветов одна позиция, смена мгновенная, и так рисуют полосы, флаги и индикаторы прогресса:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

Точка может принимать и две позиции, #111827 12px 24px, это рисует сплошную полосу от 12px до 24px.

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

conic-gradient() проводит цвета по кругу вокруг центральной точки, как стрелки часов. С резкими переходами он рисует круговую диаграмму без изображений и JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

Диаграмма, нарисованная в CSS, невидима для программ чтения с экрана, поэтому продублируйте числа текстом.

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

Обрежьте градиентный фон по буквам и сделайте сам текст прозрачным:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

Помните о запасном обычном color: если обрезка не сработает, текст исчезнет. У градиентного текста еще и неравномерная контрастность, поэтому используйте его только для крупных заголовков.

Градиенты складываются с изображениями и другими градиентами в одном списке background-image; слои, размер и позиция разобраны на странице фоновое изображение.

Частые ошибки

background-color: linear-gradient(...). Градиент это изображение: используйте background-image или background.
Градусы не в ту сторону. 0deg направлен вверх, а не вправо. 90deg идет вправо.
Градиент на элементе без высоты. Ничего не видно; дайте элементу содержимое или размер.
Грязные цвета посередине. Смешение двух насыщенных противоположных цветов, например красного и зеленого, в sRGB проходит через серо-коричневый. Добавьте среднюю точку или смешивайте в другом цветовом пространстве: linear-gradient(in oklch, red, green).
Ступеньки на больших мягких градиентах. Очень близкие цвета на большой площади показывают ступени; помогает чуть больший контраст между точками.

Часто задаваемые вопросы

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

Используйте background-image: radial-gradient(#93c5fd, #1e3a8a);. Перед цветами можно добавить форму и позицию, например radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Чем circle отличается от ellipse в radial-gradient?

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

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

Поставьте первым направление или угол: linear-gradient(to right, red, blue) или linear-gradient(45deg, red, blue). По умолчанию to bottom (180deg); 0deg направлен вверх, а углы идут по часовой стрелке.

Как сделать резкие полосы вместо плавного перехода?

Задайте двум цветам одну и ту же позицию: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) меняет цвет посередине без перехода. repeating-linear-gradient повторяет узор из таких точек.

Можно ли использовать градиент как background-color?

Нет. Градиент это изображение, поэтому он пишется в background-image или в сокращенном свойстве background. background-color: linear-gradient(...) невалидно и игнорируется.

Связанные концепции