Градиенты CSS
Плавный переход между двумя или более цветами внутри элемента создают функции градиента CSS, которые передаются свойству background-image.
Доступны три типа градиентов:
- Линейные градиенты — цвета меняются вдоль линии, идущей вниз, вверх, влево, вправо или по диагонали
- Радиальные градиенты — цвета расходятся наружу от центральной точки
- Конические градиенты — цвета вращаются вокруг центральной точки
Функция CSS linear-gradient()
Используйте функцию CSS linear-gradient(), когда цвета должны меняться вдоль прямой линии, идущей вниз, вверх, влево, вправо или по диагонали.
Цветовые точки — это цвета, которые смешиваются, и их нужно как минимум две. Направление (или угол) и начальная точка — необязательные дополнения.
Сверху вниз (по умолчанию)
В этом линейном градиенте красный находится вверху элемента и, смешиваясь, переходит вниз в жёлтый.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Top to Bottom</title>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(to bottom, red, yellow);"></div>
</body>
</html>
Снизу вверх
Если изменить направление на обратное, красный окажется внизу элемента, а переход пойдёт вверх, пока не дойдёт до жёлтого наверху.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Bottom to Top</title>
</head>
<body>
<h1>Linear Gradient - Bottom to Top</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(to top, red, yellow);"></div>
</body>
</html>
Слева направо
Этот линейный градиент идёт вбок: он начинается с красного у левого края и доходит до жёлтого у правого.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Left to Right</title>
</head>
<body>
<h1>Linear Gradient - Left to Right</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(to right, red, yellow);"></div>
</body>
</html>
По диагонали
Здесь переход пересекает элемент по диагонали: красный находится в левом верхнем углу, а жёлтый — в правом нижнем.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Diagonal</title>
</head>
<body>
<h1>Linear Gradient - Diagonal</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(to bottom right, red, yellow);"></div>
</body>
</html>
Синтаксис
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Линейный градиент - Использование углов
Вместо предопределённых направлений (to bottom, to top, to right, to left и т.д.) можно использовать значение angle, когда нужен более точный контроль над тем, куда направлен градиент.
- «to top» соответствует 0deg
- «to right» соответствует 90deg
- «to bottom» соответствует 180deg
- «to left» соответствует 270deg
Пример
С углом 180deg этот линейный градиент переходит от красного к жёлтому.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Using Angles</title>
</head>
<body>
<h1>Linear Gradient - Using Angles</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(180deg, red, yellow);"></div>
</body>
</html>
Синтаксис
background-image: linear-gradient(angle, color-stop1, color-stop2);
Линейный градиент - Несколько цветовых точек
Линейный градиент не ограничен двумя цветовыми точками.
Три цветовые точки
В этом градиенте сверху вниз идут три цвета: красный, жёлтый и зелёный.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Multiple Color Stops</title>
</head>
<body>
<h1>Linear Gradient - Multiple Color Stops</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(red, yellow, green);"></div>
</body>
</html>
Градиент радуга
Здесь все цвета радуги идут слева направо, а поверх них размещён текст.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Rainbow</title>
</head>
<body>
<h1>Linear Gradient - Rainbow</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); text-align: center; line-height: 200px; color: white; font-size: 30px;">
Rainbow Background
</div>
</body>
</html>
Линейный градиент - Прозрачность
Эффекты затухания возможны, потому что градиенты CSS могут включать прозрачность.
Задавайте цветовые точки функцией rgba(): её последнее значение управляет прозрачностью по шкале от 0 до 1, где 0 означает полную прозрачность, а 1 — полную непрозрачность (без прозрачности).
Пример
Слева направо этот градиент начинается полностью прозрачным и заканчивается полностью красным.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient - Transparency</title>
</head>
<body>
<h1>Linear Gradient - Transparency</h1>
<div id="grad" style="height: 200px; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));"></div>
</body>
</html>
Функция CSS repeating-linear-gradient()
Чтобы повторить узор линейного градиента, используйте функцию CSS repeating-linear-gradient().
Пример
Здесь повторяющийся узор такой: красный, затем жёлтый на 10% и зелёный на 20%.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repeating Linear Gradient</title>
</head>
<body>
<h1>Repeating Linear Gradient</h1>
<div id="grad" style="height: 200px; background-image: repeating-linear-gradient(red, yellow 10%, green 20%);"></div>
</body>
</html>