Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>15 мар 2023</li>

3 <li>0</li>

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

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

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

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

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

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

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

11 div { height: 200px; background: linear-gradient(red, blue); }Линейный градиентИзображение: Skillbox MediaНаправление градиента можно изменить двумя способами:

12 <ul><li>указать угол;</li>

13 <li>указать направление ключевыми словами.</li>

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

15 div { height: 200px; background: linear-gradient(45deg, red, blue); }Изменение угла градиентаИзображение: Skillbox MediaНекоторые углы соответствуют ключевым словам, которые можно использовать вместо них:

16 <ul><li>0 - to top;</li>

17 <li>90 - to right;</li>

18 <li>180 - to bottom;</li>

19 <li>270 - to left.</li>

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

21 div { height: 200px; background: linear-gradient(to right top, red, blue); }Изменение угла градиента, второй вариантИзображение: Skillbox MediaЗадаётся в CSS функцией radial-gradient(). Отличается от линейного тем, что цвет выходит из одной точки и "расплывается" к краям. По умолчанию радиальный градиент эллипсоидный и расходится из центра:

22 div { height: 200px; background: radial-gradient(red, blue); }Радиальный градиентИзображение: Skillbox MediaПо формерадиальный градиент бывает двух видов, которые задаются первым значением в функцию radial-gradient():

23 <ul><li>Эллипсоидный.Это значение по умолчанию, но его можно задать ключевым словом ellipse. Форма эллипса зависит от соотношения сторон элемента, к которому применяется градиент.</li>

24 <li>Круговой.Задаётся ключевым словом circle. Его форма от соотношения сторон не зависит:</li>

25 </ul>div { height: 200px; background: radial-gradient(circle, red, blue); }Круговой градиентИзображение: Skillbox MediaРазмер задаётся в пикселях px, процентах % или единицах em. Если он эллипсоидный - двумя значениями (по горизонтали и по вертикали), если круговой - одним:

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

27 <ul><li>closest-side - узор простирается до ближайшей к его центру стороны;</li>

28 <li>farthest-side - узор простирается до дальней от его центра стороны;</li>

29 <li>closest-corner - узор простирается до ближайшего к его центру угла.</li>

30 <li>farthest-corner - узор простирается до дальнего от его центра угла.</li>

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

32 <ul><li>координатами в пикселях px, процентах % или единицах em (первое значение по горизонтали, второе по вертикали);</li>

33 <li>ключевыми словами center, left, right, top, bottom (можно использовать сразу пару ключевых слов: первое будет указывать на положение по горизонтали, второе - по вертикали).</li>

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

35 div { height: 200px; background: radial-gradient(circle at 25% top, red, blue); }Позиционирование центраИзображение: Skillbox MediaВ CSS задаётся функцией conic-gradient(). В нём цвета не исходят из начальной точки, как в радиальном, а как бы "обёрнуты" вокруг неё.

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

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

38 Задание угла конического градиентаИзображение: Skillbox MediaЦентральная точкав коническом градиенте изменяется<a>по тем же правилам</a>, что и в радиальном. Указывается она после угла:

39 div { height: 200px; background: conic-gradient(at 15% 80%, red, blue); }Задание центральной точки конического градиентаИзображение: Skillbox MediaЛюбому виду градиента в CSS можно задать точки остановки. Это координаты для каждого отдельного цвета, внутри которых он "чистый" - без примесей и влияния других цветов.

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

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

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

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

44 div { height: 100px; background: linear-gradient(to right, yellow, red, blue 50%, black 95% 95%, green 95%); }Использование точек остановки, пример 2Изображение: Skillbox MediaЕсли конечная точка одного цвета находится там же, где и начальная следующего, между ними проходит четкая граница, без градиента. Так можно делать полосатый фон:

45 div { height: 100px; background: radial-gradient(circle, yellow 20%, red 20% 40%, blue 40% 60%, black 60% 80%, green 80%); }Полосатый фонИзображение: Skillbox MediaЕсли перед любым градиентом в CSS добавить repeating- и указать точки остановки, то градиент будет повторяться:

46 div { height: 100px; background: repeating-linear-gradient(to right, red, blue 200px); }Повторяющийся градиентИзображение: Skillbox MediaТакой метод очень удобен, когда нужно сделать полосатый фон. Посмотрим, как он работает с разными градиентами:

47 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(). Первые три числа в ней определяют фон, а четвёртое - собственно, прозрачность.

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

49 div { height: 200px; background: linear-gradient(to right, rgba(255, 0, 0, .5), rgba(0, 0, 255, 1)); }Задание прозрачности градиентаИзображение: Skillbox MediaТакже в качестве цвета можно указать transparent - полную прозрачность. Это используют для эффекта затухания:

50 div { height: 200px; background: radial-gradient(circle 100px, red, transparent); }Эффект затуханияИзображение: Skillbox MediaДля создания сложных цветовых переливов свойству можно передать сразу несколько градиентов, которые накладываются друг на друга слоями. Чем раньше указан градиент, тем он выше.

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

52 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Таким образом можно смешать сколько угодно градиентов любых видов.

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

54 HTML:

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

56 body { background: linear-gradient(to right, pink, transparent, pink) }Использование градиентного фонаИзображение: Skillbox MediaГрадиенты в CSS можно применять не только к свойству background и его подвиду background-image, но и к border-image. В таком случае мы будем задавать градиент не для фона, а для рамки вокруг какого-то объекта.

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

58 HTML:

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

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

61 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 в списке, то числа или точки перед каждым пунктом заменятся на узор:

62 HTML:

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

64 ul { list-style-image: conic-gradient(red, blue); }Градиентный списокИзображение: Skillbox Media<ul><li>Чтобы в сделать в документе HTML градиент, его параметры нужно прописать в CSS.</li>

65 <li>Градиенты применяются к следующим свойствам: background, background-image, border-image, list-style-image.</li>

66 <li>Они бывают трёх видов: линейные, радиальные и конические.</li>

67 <li>У линейныхможно настраивать направление, в котором цвета сменяют друг друга.</li>

68 <li>У радиальныхможно настраивать форму, размер и координаты центральной точки.</li>

69 <li>У коническихможно настраивать угол и координаты центральной точки.</li>

70 <li>Любому градиенту можно задавать точки остановки, в которых цвета будут "чистыми", без примесей других. Таким образом можно делать более резкие и плавные переходы.</li>

71 <li>Градиентам можно задавать прозрачность и наслаивать их друг на друга, чтобы создавать сложные узоры.</li>

72 </ul><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>