CSS функция linear-gradient()

Определение и применение

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

Функция линейный градиент является самой простой в понимании, она распространяет градиент по прямой от одного края элемента к другому с плавно переходящими цветовыми оттенками. Для построения линейного градиента достаточно задать начальный и конечный цвет.

Более подробно о работе с градиентами вы можете ознакомиться в статьях «CSS функции: линейные градиенты» и «CSS функции: радиальные градиенты». В статьях освещены нюансы работы со старыми браузерами и приведены многочисленные примеры.

Попробуйте функцию linear-gradient()

.sample {
  background-image: linear-gradient(90deg, #267fc1 0%, #f58232 100%);
}

<div class="sample"></div>

Градиент имеет тип изображения, поэтому подходит для background-image, но не background-color. Позиция остановки — место достижения цвета, а не размер цветной площади. Две остановки на одной позиции дают резкую границу; неуказанные промежуточные позиции распределяются между ближайшими заданными. Позиции, идущие назад, поднимаются до предыдущей.

Современная запись позволяет выбрать пространство интерполяции, например linear-gradient(90deg in oklab, red, blue). Две позиции у одного цвета сокращают запись одноцветного участка: red 0 30%. Цвета и пространство перехода — разные настройки.

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

Спецификация: CSS images-3

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.types.gradient.linear-gradient

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
linear-gradient	✓26…	✓12	✓16…	✓12.1…	✓7…	✓26…	✓16…	✓12.1…	✓7…	✓1.5…	✓4.4…	✓7…
doubleposition	✓71	✓79	✓64	✓58	✓12.1	✓71	✓64	✓50	✓12.2	✓10.0	✓71	✓12.2
Hue interpolation method	✓111	✓111	✓127	✓97	✓16.2	✓111	✓127	✓75	✓16.2	✓22.0	✓111	✓16.2
Interpolation color space	✓111	✓111	✓127	✓97	✓16.2	✓111	✓127	✓75	✓16.2	✓22.0	✓111	✓16.2
Interpolation Hints / Gradient Midpoints	✓40	✓79	✓36	✓27	✓7	✓40	✓36	✓27	✓7	✓4.0	✓40	✓7
Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)	✓29	✓79	✓36	✓16	✓15	✓29	✓36	✓16	✓15	✓2.0	✓4.4	✓15
Single color stop and 0-1 positions	✓135	✓135	✓136	✓120	✓18.4	✓135	✓136	✓89	✓18.4	✓29.0	✓135	✓18.4
to	✓26	✓12	✓10	✓12.1	✓7	✓26	✓10	✓14	✓7	✓1.5	✓4.4	✓7
Unitless 0 for <angle>	✓26	✓12	✓55…	✓16	✓7	✓26	✓55…	✓14	✓7	✓1.5	✓4.4	✓7
Ещё 5 значений · ✓ поддерживаются везде более 3 летСвернуть

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

CSS синтаксис:

background-image / background: linear-gradient(направление, цвет1 – остановка1, . . . , цветn – остановкаn);
/* допускается использование нескольких линейных градиентов в одном объявлении через запятую */

Цвет

Создавая градиент, допускается использовать не только «Предопределенные цвета», но и любые «значения цвета, используемые в CSS» - шестнадцатеричные (HEX), значения цвета RGB / -A и HSL /-A.

Направление

Все линейные градиенты (по умолчанию) размещаются по направлению от верхнего края элемента к нижнему. В CSS есть несколько вариантов изменения начальной позиции градиента - это использование значений в градусах, либо ключевых слов.

Для указания начальной позиции градиента применяются следующие ключевые слова:

Угол задаётся CSS-углом: 0deg — вверх, 90deg — вправо. Допустимы отрицательные углы, значения больше оборота и единицы turn, rad, grad; например -90deg и 270deg дают одно направление.

Линейный градиент, заданный в градусах проходит через середину точки центра элемента и отображается (рендерится) вдоль этой линии. Ниже представлено изображение, на котором указано как располагается градиент под тем или иным углом на примере квадратного элемента:

Расположение градиента, заданного в градусах в квадратном элементе.

Значения 0deg, 90deg, 180deg и 270deg соответствуют значениям ранее рассмотренных ключевых слов независимо от того является элемент квадратным или имеет прямоугольную форму. В случае если элемент полностью квадратный, то следующие значения в градусах будут полностью соответствовать ключевым словам:

^* - верно, только для квадратного элемента. На изображении ниже отображена разница между значениями в 45 градусов и значениями to right top для прямоугольного элемента. Главное, что необходимо понять, что для квадратных элементов значения 45deg и to right top, 135deg и to right bottom, 225deg и to left bottom, 315deg и to left top будут одинаковы, а для прямоугольных градиентов эти значения будут отличаться:

При to top right линия градиента направлена в сторону верхнего правого угла и перпендикулярна диагонали от верхнего левого к нижнему правому углу. Поэтому её угол зависит от пропорций прямоугольника: в показанном блоке с соотношением сторон 2:1 он равен примерно 26,6deg.

Расположение градиента в прямоугольном элементе (сравнение 45deg и to right top).

Точки остановки

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

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

Допускается указывать значения точек остановки (color stops) в единицах измерения длины (например – px или em), так и в процентных значениях. Как правило, процентные значения являются более удобными и адаптивными в использовании.

Версия CSS

Примеры, попробуйте сами

Настройка градиента

Измените угол 90deg или цвета. Добавьте промежуточный цвет с позицией 50%.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #24364b;
    overflow-wrap: anywhere;
}
section {
    margin-block: 16px;
    padding: 12px;
    border: 1px solid #a8b8c7;
}
p {
    padding: 8px;
}
label {
    display: block;
    margin-block: 12px;
}
input,
button {
    max-width: 100%;
    font: inherit;
    padding: 8px;
}
input[type='checkbox'] + label {
    display: inline;
}
a {
    color: #135fb5;
}
.sample {
    min-height: 200px;
    border: 1px solid #60788a;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Настройка градиента</title>
  </head>
  <body>
    <div class="sample" aria-label="Градиент"></div>
  </body>
</html>

style.css

CSS

.sample {
    background-image: linear-gradient(90deg, #35658a, #f4c95d);
}

Плавный и резкий переход

При совпадающих позициях остановок переход становится резким. Измените обе позиции во втором градиенте.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #24364b;
    overflow-wrap: anywhere;
}
section {
    margin-block: 16px;
    padding: 12px;
    border: 1px solid #a8b8c7;
}
p {
    padding: 8px;
}
label {
    display: block;
    margin-block: 12px;
}
input,
button {
    max-width: 100%;
    font: inherit;
    padding: 8px;
}
input[type='checkbox'] + label {
    display: inline;
}
a {
    color: #135fb5;
}
.sample {
    padding: 32px 12px;
    margin-bottom: 12px;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Плавный и резкий переход</title>
  </head>
  <body>
    <div class="sample a">Вариант A</div>
    <div class="sample b">Вариант B</div>
  </body>
</html>

style.css

CSS

.a {
    background: linear-gradient(to right, #c5dbea, #ffe29a);
}
.b {
    background: linear-gradient(to right, #c5dbea 50%, #ffe29a 50%);
}