CSS-градиенты
CSS-градиенты создают плавные переходы между цветами. Узнайте о типах градиентов, синтаксисе и посмотрите примеры.
CSS-градиент — это изображение, которое браузер генерирует самостоятельно: оно отображает плавный, последовательный переход между двумя или более заданными цветами. Поскольку градиент технически является <image>, его можно использовать везде, где CSS ожидает значение изображения — чаще всего это свойство background-image, но оно также работает для border-image, list-style-image и mask-image.
Градиенты не зависят от разрешения (они масштабируются до любого размера без потери качества) и не создают никаких дополнительных HTTP-запросов, что делает их лёгкой альтернативой файлам изображений для фонов, кнопок, наложений и декоративных форм.
На этой странице рассмотрены три функции градиентов, определённые в CSS, с запускаемыми примерами для каждой:
- Линейные градиенты — цвета текут вдоль прямой линии.
- Радиальные градиенты — цвета расходятся из центральной точки.
- Конические градиенты — цвета вращаются вокруг центральной точки.
Каждая функция также имеет вариант repeating-*, который повторяет градиент мозаикой, а не растягивает его один раз по всему блоку.
Линейные градиенты
Функция linear-gradient() создаёт изображение, в котором цвета переходят вдоль прямой линии. Вы управляете двумя параметрами: направлением этой линии и списком цветовых точек, расположенных вдоль неё. Если направление не задано, линия идёт сверху вниз.
Синтаксис линейного градиента
background-image: linear-gradient(direction, color1, color2, ...);direction необязателен. Это может быть ключевое слово (to right, to bottom left) или угол (90deg). Всё остальное — это разделённый запятыми список цветов. Подходит любой допустимый CSS-цвет: именованные цвета, hex, rgb() и hsl().
Сверху вниз
По умолчанию линейный градиент переходит сверху вниз, поэтому направление можно не указывать.
Пример линейного градиента сверху вниз
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(#0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Объявление background-color служит запасным вариантом: очень старые браузеры, которые не понимают градиент, игнорируют строку background-image и возвращаются к сплошному цвету, поэтому текст остаётся читаемым.
Слева направо
Добавьте ключевое слово to right, чтобы повернуть линию так, чтобы первый цвет находился у левого края, а последний — у правого.
Пример линейного градиента слева направо
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to right, #0052b0 ,#b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Диагональные градиенты
Объедините вертикальное и горизонтальное ключевые слова (например, to bottom right), чтобы линия шла диагонально через блок — из угла в угол.
Пример диагонального градиента
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to bottom right, #0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Использование углов
Для полного контроля над направлением вместо ключевого слова задайте угол. Угол отсчитывается по часовой стрелке от направления «вверх»: 0deg направляет линию градиента вертикально вверх (цвета текут снизу вверх), 90deg — вправо (слева направо), 180deg — вниз. Отрицательные углы поворачивают против часовой стрелки.
Пример линейного градиента с заданным углом
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(70deg, #0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Несколько цветов
Градиент принимает любое количество цветов. По умолчанию они располагаются равномерно, плавно переходя один в другой.
Пример линейного градиента с несколькими цветами
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(#f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Вы можете комбинировать направление с несколькими цветами и фиксировать каждый цвет в определённой позиции. Позиция задаётся в процентах (0% — начало линии, 100% — конец) или в абсолютных единицах длины. Задав одному цвету две позиции, вы создадите чёткую полосу этого цвета между ними.
Пример линейного градиента с несколькими цветами слева направо
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to right, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Пример линейного градиента с несколькими цветами справа налево
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to left, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Прозрачность
Цветовые точки могут быть частично или полностью прозрачными, что удобно для плавного перехода фона в то, что находится позади него. Используйте rgba() (или любой цвет с альфа-каналом) и задайте альфа-значение от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Это стандартный способ создания читаемого наложения поверх фотографии.
Пример линейного градиента от полного цвета к прозрачному
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 200px;
background-image: linear-gradient(to left, rgba(235, 117, 253, 0), rgba(235, 117, 253, 1));
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Повторяющийся линейный градиент
repeating-linear-gradient() повторяет паттерн градиента по всему блоку мозаикой вместо того, чтобы растягивать его один раз. Размер одного повтора определяется позицией последней цветовой точки — здесь 10%, поэтому трёхцветный паттерн повторяется каждые 10% линии. Это удобно для создания полос и текстур прогресс-баров.
Пример повторяющегося линейного градиента
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 200px;
background-color: blue;
background-image: repeating-linear-gradient(55deg, #d5b6de, #6c008a 7%, #036ffc 10%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Радиальные градиенты
Радиальный градиент расходится из центральной точки: первый цвет находится в центре, последний — на краю. Необходимо указать не менее двух цветовых точек. Форма градиента может быть circle (круг) или ellipse (эллипс, по умолчанию).
Синтаксис радиального градиента
background-image: radial-gradient(shape size at position, start-color, ..., last-color);Часть shape size at position необязательна. Если её опустить, получится эллипс farthest-corner, выровненный по центру блока.
Пример радиального градиента с тремя цветами
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient( #ff0509, #fff700, #05ff33);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Позиционирование цветовых точек радиального градиента
Как и в линейных градиентах, каждую цветовую точку можно зафиксировать в процентах или абсолютных единицах длины, чтобы управлять долей радиуса, которую она занимает.
Пример цветовых точек с разным интервалом
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient( #ff0509 10%, #fff700 20%, #05ff33 80%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Позиционирование центра
Используйте ключевое слово at, чтобы переместить центр градиента от середины блока, задав позицию в процентах или абсолютных единицах длины.
Пример радиального градиента с позиционированным центром
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient(at 0% 30%, #ff0509 10px, #fff700 30%, #05ff33 50%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Форма радиального градиента
Параметр формы принимает значение circle (круг) или ellipse (эллипс). Эллипс (по умолчанию) растягивается в соответствии с соотношением сторон блока; круг остаётся идеально круглым вне зависимости от ширины и высоты блока.
Пример формы радиального градиента
<!DOCTYPE html>
<html>
<head>
<title> Title of the document</title>
<style>
.gradient1 {
height: 150px;
width: 200px;
background-color: blue;
background-image: radial-gradient(red, yellow, green);
}
.gradient2 {
height: 150px;
width: 200px;
background-color: blue;
background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<h2>Ellipse:</h2>
<div class="gradient1"></div>
<h2>Circle:</h2>
<div class="gradient2"></div>
</body>
</html>Размер радиального градиента
Ключевое слово размера определяет, где заканчивается последняя цветовая точка — то есть насколько далеко распространяется градиент. Есть четыре ключевых слова, отсчитываемых от центра градиента:
closest-side— заканчивается у ближайшего края блока.closest-corner— заканчивается у ближайшего угла.farthest-side— заканчивается у дальнего края.farthest-corner— заканчивается у дальнего угла. Это значение по умолчанию.
Пример радиальных градиентов с заданным размером
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient1 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(closest-side at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient2 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(farthest-side at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient3 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(closest-corner at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient4 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(farthest-corner at 60% 55%, #ff0509, #fff700, #103601);
}
</style>
</head>
<body>
<h2>closest-side:</h2>
<div class="gradient1"></div>
<h2>farthest-side:</h2>
<div class="gradient2"></div>
<h2>closest-corner:</h2>
<div class="gradient3"></div>
<h2>farthest-corner:</h2>
<div class="gradient4"></div>
</body>
</html>Повторяющийся радиальный градиент
repeating-radial-gradient() повторяет радиальный паттерн кольцами от центра наружу. Как и в линейном варианте, позиция последней цветовой точки задаёт размер одного кольца.
Пример повторяющегося радиального градиента
<!DOCTYPE html>
<html>
<head>
<style>
.gradient {
height: 200px;
width: 200px;
background-color: blue;
background-image: repeating-radial-gradient(#f70000, #f7da00 10%, #005cfa 15%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Конические градиенты
Конический градиент вращает цвета вокруг центральной точки, подобно стрелкам часов, проходящим через весь спектр. Там, где радиальный градиент меняет цвет по мере движения наружу, конический — по мере движения вокруг. Это делает его идеальным инструментом для круговых диаграмм, цветовых кругов и угловых акцентов.
Синтаксис конического градиента
background-image: conic-gradient(color1, color2);Позиции цветовых точек задаются углом (deg), а не длиной. Градиент начинается сверху (0deg) и разворачивается по часовой стрелке.
Пример базового конического градиента
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(#ff0000, #fff200);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Позиционирование центра конического градиента
Как и в случае с радиальными градиентами, ключевое слово at перемещает центральную точку вращения, задавая её в процентах или абсолютных единицах длины.
Пример конического градиента с позиционированным центром
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(at 0% 50%, red 10%, yellow 30%, #1eff00 60%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Изменение угла
Ключевое слово from поворачивает весь конус, смещая начальную точку 0deg.
Пример конического градиента с повёрнутым углом
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(from 35deg, #ff0000, #ffa600, #fcf000, #03ff0f, #be05fc, #ff0095);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Повторяющийся конический градиент
repeating-conic-gradient() повторяет угловой паттерн по всему кругу — это классический способ создания эффектов «звёздного взрыва» и шахматной доски.
Пример повторяющегося конического градиента
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Поддержка браузерами и советы
Линейные и радиальные градиенты поддерживаются во всех современных браузерах. Конические градиенты появились позже — они работают во всех актуальных версиях Chrome, Edge, Firefox и Safari, но если необходимо поддерживать очень старые браузеры, добавьте запасной вариант в виде сплошного background-color, как показано выше.
Несколько практических советов:
- Наслаивайте градиенты. Свойство
background-imageпринимает список через запятую, поэтому можно накладывать несколько градиентов друг на друга (первый в списке находится сверху). Комбинируйте прозрачные градиенты с фотографией для создания наложений. - Используйте
hsl()для более плавных переходов. При интерполяции между сильно различающимися оттенками в hex-формате промежуточные значения могут проходить через грязно-серые тона; выбор близких оттенков или использованиеhsl()сохраняет переходы чистыми. - Производительность. Градиенты относительно дёшевы, однако их анимация вызывает перерисовку всего блока. Для плавного движения предпочтительнее анимировать
transform/opacity, а не сам градиент.
Связанные темы
background-image— свойство, к которому градиенты применяются чаще всего.background-size— управление размером слоя градиента для создания мозаики.- CSS-цвета и CSS-имена цветов — значения цветов, используемые внутри градиентов.
- CSS-переходы — для анимации других свойств вместе с фоновыми градиентами.