Градиент в CSS: что это и как его сделать
2026-02-21 03:30 Diff
https://skillbox.ru/media/code/gradient-v-css-chto-eto-i-kak-ego-sdelat/

#статьи

  • 15 мар 2023
  • 0

Добавляем красивые переходы и узоры на вашу HTML-страницу при помощи CSS-градиентов.

Иллюстрация: Оля Ежак для Skillbox Media

Журналист, изучает Python. Любит разбираться в мелочах, общаться с людьми и понимать их.

Чтобы добавить градиент на HTML-страницу, нужно использовать CSS. С его помощью можно не только создавать цветовые палитры, но и рисовать блики, придавать объектам эффект трёхмерности, делать полосатые и фигурные фоны.

Градиенты в CSS применяются к свойствам background, background-image, border-image, list-style-image.

В большинстве примеров в этой статье будет использоваться один и тот же незатейливый HTML-код:

<div></div>

В CSS он задаётся функцией linear-gradient(). Ей нужно передать несколько цветов, из которых она и составит узор. По умолчанию он будет направлен сверху вниз:

div { height: 200px; background: linear-gradient(red, blue); }Линейный градиент
Изображение: Skillbox Media

Направление градиента можно изменить двумя способами:

  • указать угол;
  • указать направление ключевыми словами.

Угол градиента задаётся в градусах deg, градах grad, радианах rad или количестве оборотов turn. Его можно указывать как положительным, так и отрицательным:

div { height: 200px; background: linear-gradient(45deg, red, blue); }Изменение угла градиента
Изображение: Skillbox Media

Некоторые углы соответствуют ключевым словам, которые можно использовать вместо них:

  • 0 — to top;
  • 90 — to right;
  • 180 — to bottom;
  • 270 — to left.

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

div { height: 200px; background: linear-gradient(to right top, red, blue); }Изменение угла градиента, второй вариант
Изображение: Skillbox Media

Задаётся в CSS функцией radial-gradient(). Отличается от линейного тем, что цвет выходит из одной точки и «расплывается» к краям. По умолчанию радиальный градиент эллипсоидный и расходится из центра:

div { height: 200px; background: radial-gradient(red, blue); }Радиальный градиент
Изображение: Skillbox Media

По форме радиальный градиент бывает двух видов, которые задаются первым значением в функцию radial-gradient():

  • Эллипсоидный. Это значение по умолчанию, но его можно задать ключевым словом ellipse. Форма эллипса зависит от соотношения сторон элемента, к которому применяется градиент.
  • Круговой. Задаётся ключевым словом circle. Его форма от соотношения сторон не зависит:
div { height: 200px; background: radial-gradient(circle, red, blue); }Круговой градиент
Изображение: Skillbox Media

Размер задаётся в пикселях px, процентах % или единицах em. Если он эллипсоидный — двумя значениями (по горизонтали и по вертикали), если круговой — одним:

div { height: 200px; background: radial-gradient(25% 50%, red, blue); }Задание размеров эллипсоидного градиента в пикселях
Изображение: Skillbox Mediadiv { height: 200px; background: radial-gradient(circle 80px, red, blue); }Задание размеров кругового градиента в пикселях
Изображение: Skillbox Media

Альтернативный способ — использовать ключевые слова:

  • closest-side — узор простирается до ближайшей к его центру стороны;
  • farthest-side — узор простирается до дальней от его центра стороны;
  • closest-corner — узор простирается до ближайшего к его центру угла.
  • farthest-corner — узор простирается до дальнего от его центра угла.

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

  • координатами в пикселях px, процентах % или единицах em (первое значение по горизонтали, второе по вертикали);
  • ключевыми словами center, left, right, top, bottom (можно использовать сразу пару ключевых слов: первое будет указывать на положение по горизонтали, второе — по вертикали).

Числовые координаты и ключевые слова можно комбинировать в одном выражении. Например:

div { height: 200px; background: radial-gradient(circle at 25% top, red, blue); }Позиционирование центра
Изображение: Skillbox Media

В CSS задаётся функцией conic-gradient(). В нём цвета не исходят из начальной точки, как в радиальном, а как бы «обёрнуты» вокруг неё.

По умолчанию начальная точка находится по центру, а его движение начинается от линии с углом ноль градусов.

Конический градиент по умолчанию
Изображение: Skillbox Media

Угол, от которого начинается движение градиента, задаётся ключевым словом from. После него указывается значение в градусах deg, градах grad, радианах rad или количестве оборотов turn.

Задание угла конического градиента
Изображение: Skillbox Media

Центральная точка в коническом градиенте изменяется по тем же правилам, что и в радиальном. Указывается она после угла:

div { height: 200px; background: conic-gradient(at 15% 80%, red, blue); }Задание центральной точки конического градиента
Изображение: Skillbox Media

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

Указываются они после каждого цвета в пикселях px, процентах % или единицах em (к коническому градиенту можно применять только проценты). Если передать только одну координату — цвет будет «чистым» только в ней, если передать две — на всё пространстве между ними.

Посмотрим на примерах, как они работают. Вот линейный градиент без точек остановки:

div { height: 100px; background: linear-gradient(to right, yellow, red, blue, black, green); }Линейный градиент без точек остановки
Изображение: Skillbox Media

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

div { height: 100px; background: linear-gradient(to right, yellow 30%, red 50% 80%, blue, black, green); }Использование точек остановки, пример 1
Изображение: Skillbox Media

Теперь сделаем резкий переход между зелёным и чёрным цветом и плавный — между синим и чёрным:

div { height: 100px; background: linear-gradient(to right, yellow, red, blue 50%, black 95% 95%, green 95%); }Использование точек остановки, пример 2
Изображение: Skillbox Media

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

div { height: 100px; background: radial-gradient(circle, yellow 20%, red 20% 40%, blue 40% 60%, black 60% 80%, green 80%); }Полосатый фон
Изображение: Skillbox Media

Если перед любым градиентом в CSS добавить repeating- и указать точки остановки, то градиент будет повторяться:

div { height: 100px; background: repeating-linear-gradient(to right, red, blue 200px); }Повторяющийся градиент
Изображение: Skillbox Media

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

div { height: 200px; background: repeating-linear-gradient(45deg, black 0% 3%, yellow 3% 6%); }Повторяющийся линейный градиент
Изображение: Skillbox Mediadiv { height: 200px; background: repeating-radial-gradient(circle, black 0% 3%, yellow 3% 6%); }Повторяющийся радиальный градиент
Изображение: Skillbox Mediadiv { height: 200px; background: repeating-conic-gradient(black 0% 3%, yellow 3% 6%); }Повторяющийся конический градиент
Изображение: Skillbox Media

Задать прозрачность какому-то из цветов градиента, можно с помощью функции rgba(). Первые три числа в ней определяют фон, а четвёртое — собственно, прозрачность.

Оно представляет собой десятичную дробь в диапазоне от 0.0 (полная прозрачность) до 1 (полная непрозрачность). Нули перед точкой можно не проставлять, то есть 0.5 и .5 — одно и то же:

div { height: 200px; background: linear-gradient(to right, rgba(255, 0, 0, .5), rgba(0, 0, 255, 1)); }Задание прозрачности градиента
Изображение: Skillbox Media

Также в качестве цвета можно указать transparent — полную прозрачность. Это используют для эффекта затухания:

div { height: 200px; background: radial-gradient(circle 100px, red, transparent); }Эффект затухания
Изображение: Skillbox Media

Для создания сложных цветовых переливов свойству можно передать сразу несколько градиентов, которые накладываются друг на друга слоями. Чем раньше указан градиент, тем он выше.

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

div { height: 200px; background: linear-gradient(to right, rgba(255, 255, 0, .5), rgba(255, 0, 0, .5)), linear-gradient(rgba(0, 255, 0, .7) 25%, rgba(255, 0, 0, .7) 75%); }Использование множественного градиента
Изображение: Skillbox Media

Таким образом можно смешать сколько угодно градиентов любых видов.

Чтобы сделать градиент фоном HTML-документа, его нужно применить сразу ко всему телу <body>.

HTML:

<body> <h2>Заголовок</h2> <p>Текст HTML-документа</p> </body>

CSS:

body { background: linear-gradient(to right, pink, transparent, pink) }Использование градиентного фона
Изображение: Skillbox Media

Градиенты в CSS можно применять не только к свойству background и его подвиду background-image, но и к border-image. В таком случае мы будем задавать градиент не для фона, а для рамки вокруг какого-то объекта.

После функции нужно задать число: оно укажет CSS, как нарезать куски фонового изображения для рамки.

HTML:

<div>Блок с градиентной рамкой вокруг него</div>

CSS:

div { height: 100px; width: 200px; border: 20px solid; border-image: linear-gradient(45deg, red, blue) 25; }Градиентная рамка, вариант 1
Изображение: Skillbox Media

Используя разные числа после градиента, можно создавать разные рамки. Сравните:

div { height: 100px; width: 200px; border: 20px solid; border-image: repeating-linear-gradient(45deg, red 0px 8px, blue 8px 16px) 5; }Градиентная рамка, вариант 2
Изображение: Skillbox Mediadiv { height: 100px; width: 200px; border: 20px solid; border-image: repeating-linear-gradient(45deg, red 0px 8px, blue 8px 16px) 30; }Градиентная рамка, вариант 3
Изображение: Skillbox Media

Если применять градиент к свойству list-style-image в списке, то числа или точки перед каждым пунктом заменятся на узор:

HTML:

<ul> <li>Первый пункт</li> <li>Второй пункт</li> </ul>

CSS:

ul { list-style-image: conic-gradient(red, blue); }Градиентный список
Изображение: Skillbox Media
  • Чтобы в сделать в документе HTML градиент, его параметры нужно прописать в CSS.
  • Градиенты применяются к следующим свойствам: background, background-image, border-image, list-style-image.
  • Они бывают трёх видов: линейные, радиальные и конические.
  • У линейных можно настраивать направление, в котором цвета сменяют друг друга.
  • У радиальных можно настраивать форму, размер и координаты центральной точки.
  • У конических можно настраивать угол и координаты центральной точки.
  • Любому градиенту можно задавать точки остановки, в которых цвета будут «чистыми», без примесей других. Таким образом можно делать более резкие и плавные переходы.
  • Градиентам можно задавать прозрачность и наслаивать их друг на друга, чтобы создавать сложные узоры.
Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе