Справочник · CSS

linear-gradient: плавный переход цветов

Редакция PraktumОбновлено 24 октября 20266 мин чтенияУровень: новичок

Функция linear-gradient() создаёт изображение, в котором цвета плавно переходят друг в друга вдоль прямой линии: background: linear-gradient(to right, #2a62d9, #8b5cf6). Градиент — это картинка, а не цвет, поэтому его задают в background или background-image, а не в background-color.

Минимальный пример

.hero {
  background: linear-gradient(135deg, #2a62d9, #8b5cf6);
  color: #fff;
}

Фон плавно переходит от синего в левом верхнем углу к фиолетовому в правом нижнем. Все цвета, которые понимает CSS, работают и в градиенте: hex, rgb с прозрачностью, названия цветов, transparent.

Направление и угол

Угол отсчитывается от направления «вверх» по часовой стрелке: 0deg — снизу вверх, 90deg — слева направо. to bottom right и 135deg совпадают только у квадрата: «в угол» подстраивается под пропорции блока, а угол — нет.

Точки цвета

.a { background: linear-gradient(to right, #2a62d9, #22c55e, #f59e0b); }      /* три цвета поровну */
.b { background: linear-gradient(to right, #2a62d9 0%, #2a62d9 30%, #8b5cf6 100%); } /* синий держится 30% */
.c { background: linear-gradient(to right, #2a62d9 20%, #8b5cf6 80%); }              /* переход только в середине */

Без позиций цвета распределяются равномерно. Позиция после цвета говорит, где он должен быть «в чистом виде»: до первой позиции — первый цвет сплошной, после последней — последний. Позиции пишут в процентах или длинах.

Резкие переходы и полосы

/* половина синяя, половина белая */
.split { background: linear-gradient(to right, #2a62d9 50%, #fff 50%); }

/* повторяющиеся диагональные полосы */
.stripes {
  background: repeating-linear-gradient(45deg, #fde68a 0 10px, #fef3c7 10px 20px);
}

/* полоска-индикатор прогресса 65% */
.progress { background: linear-gradient(to right, #22c55e 65%, #e5e7eb 65%); }

Если два соседних цвета стоят в одной позиции, плавного перехода нет — получается чёткая граница. repeating-linear-gradient повторяет узор до конца блока: так рисуют полосы, разметку и предупреждающие ленты без картинок. Запись #fde68a 0 10px — цвет занимает отрезок от 0 до 10px.

Затемнение картинки

.cover {
  background:
    linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .65)),
    url("/images/cover.webp") center / cover;
  color: #fff;
}

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

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

.gradient-title {
  background: linear-gradient(90deg, #2a62d9, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

radial-gradient и conic-gradient

.glow { background: radial-gradient(circle at 30% 20%, #c7d2fe, transparent 60%); }
.pie  { background: conic-gradient(#2a62d9 0 40%, #22c55e 0 75%, #f59e0b 0); border-radius: 50%; }

Можно ли анимировать градиент

Обычный transition между двумя градиентами не работает: браузер не умеет плавно менять изображения и переключит их скачком. Варианты: анимировать background-position у широкого градиента, менять opacity у второго слоя-псевдоэлемента или объявить цвета через @property как типизированные CSS-переменные и анимировать их.

Градиент или картинка

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

• Пишут градиент в background-color — свойство его не принимает.
• Путают угол: 0deg — снизу вверх, а не слева направо.
• Ставят светлый текст на градиент без проверки контраста по светлому краю.
• Ждут плавного transition между двумя градиентами.
• Забывают запасной цвет фона для текста на градиенте.

Доступность

Контраст текста проверяй по самому неудачному участку градиента — тому, где фон ближе всего к цвету текста. Под градиентом задай сплошной background-color как запасной: если градиент не загрузится или включён режим высокой контрастности, текст останется читаемым. Не передавай смысл только цветами градиента.

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

linear-, radial- и repeating-градиенты работают во всех браузерах без префиксов, conic-gradient — во всех актуальных. Запись с background-clip: text в части браузеров всё ещё требует дубля с префиксом -webkit-. Интерполяция цветов в других пространствах (linear-gradient(in oklch, …)) доступна в современных версиях.

.hero {
  background-color: #2a62d9; /* запасной */
  background-image: linear-gradient(135deg, #2a62d9, #8b5cf6);
  color: #fff;
}
.cover {
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .7)),
    url("/images/cover.webp") center / cover;
}
.progress {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, #22c55e 40%, #e5e7eb 40%);
}