Свойство CSS linear-gradient

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

Браузеры для ПК
Internet Explorer Chrome Opera Safari Firefox Edge
10+ 26.0+ 12.1+ 6.1+ 12+ Да
Браузеры для планшетов и мобильных устройств
Android webview Chrome для Android Edge Mobile Firefox для Android Opera для Android iOS Safari Samsung Internet
Да Да Да Да Да 7.1+ Да

Краткая информация

Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Реализация в javascript Добавление стиля непосредственно самому элементу
document.getElementById('idElement').setAttribute('style','background: linear-gradient (0deg, #1e5799 0%, #2e9de8 100%);');
в данном случае элементу с id='idElement' будет добавлен стиль
background: linear-gradient (0deg, #1e5799 0%, #2e9de8 100%);
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="background: linear-gradient (0deg, #1e5799 0%, #2e9de8 100%);">...</div>
Реализация в jQuery Добавление стиля непосредственно самому элементу
$('#idElement').css('background','linear-gradient (0deg, #1e5799 0%, #2e9de8 100%)');
в данном случае элементу с id='idElement' будет добавлен стиль
background: linear-gradient (0deg, #1e5799 0%, #2e9de8 100%);
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="background: linear-gradient (0deg, #1e5799 0%, #2e9de8 100%);">...</div>

Поддерживающие версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Создает линейный градиент, т.е. плавный переход от одного цвета к другому, у свойства background или background-image. Можно задать несколько точек начала градиента с индивидуальным цветом, при этом указать на каком расстоянии будут находится точки градиента. Цвет и расстояния можно задавать в любых допустимых в CSS единицах.

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

Поэкспериментировать и попробовать создать свой градиент можно при помощи CSS генератора градиента по данной ссылке.

Синтаксис

background-image: linear-gradient ([<угол> | <позиция>], первый <цвет>, второй <цвет> [,<цвет>]*);

Например:

... background: linear-gradient (0deg, rgba(30, 87, 153, 1) 0%, rgba(46, 157, 232, 1) 100%); или background-image: linear-gradient (0deg, #1e5799 0%, #2e9de8 100%); ...

Значения

угол

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

К примеру если мы укажем конец градиента 45 градусов, то его начало будет на 225 градусов.

Нулевая точка или 0 градусов расположено в верхней части, направление роста координат по часовой стрелки (см. рис. 1 ниже). Так же допустимо указывать отрицательные углы, поставив минус перед значением, тогда отчет будет вестись против часовой стрелки и значение -90 градусов будет расположено в левой части и соответствовать 270 градусам.

рис. 1

позиция

Альтернатива углу за исключением того, что вместо градусов применяются значения to left, to right, to top и to bottom, которые указывают в какую сторону будет направлен градиент. Так же допустимо указывать значения сочетания граничащих сторон: to left top, to top right, to right bottom, to bottom left. При этом порядок первого и второго значения не важен, таким образом значение to top right будет равно to right top.

Ниже представлена таблица соответствия позиции и угла (табл.1)

цвет

Цвета градиента в любых допустимых CSS значениях цвета

Табл. 1. Типы градиента
Позиция Угол Направление градиента Вид
to top 0deg
или
360deg
Снизу вверх. Снизу вверх
to left 270deg
или
-90deg
Справа налево. Справа налево.
to bottom 180deg
или
-180deg
Сверху вниз. Сверху вниз.
to right 90deg
или
-270deg
Слева направо. Слева направо.
to left top
или
to top left
315deg
или
-45deg
От правого нижнего угла к левому верхнему. От правого нижнего угла к левому верхнему.
to left bottom
или
to bottom left
225deg
или
-135deg
От правого верхнего угла к левому нижнему. От правого верхнего угла к левому нижнему.
to right top
или
to top right
45deg
или
-315deg
От левого нижнего угла к правому верхнему. От левого нижнего угла к правому верхнему.
to right bottom
или
to bottom right
135deg
или
-225deg
От левого верхнего угла к правому нижнему. От левого верхнего угла к правому нижнему.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример использования свойства linear-gradient</title> <style> div { padding: 10px; border: 1px solid #666; background: -o-linear-gradient(0deg,rgba(0, 165, 223, 1) 0%,rgba(62, 20, 123, 1) 20%,rgba(226, 0, 121, 1) 40%,rgba(223, 19, 44, 1) 60%,rgba(243, 239, 21, 1) 80%,rgba(0, 152, 71, 1) 100%); background: -webkit-linear-gradient(0deg,rgba(0, 165, 223, 1) 0%,rgba(62, 20, 123, 1) 20%,rgba(226, 0, 121, 1) 40%,rgba(223, 19, 44, 1) 60%,rgba(243, 239, 21, 1) 80%,rgba(0, 152, 71, 1) 100%); background: -moz-linear-gradient(0deg,rgba(0, 165, 223, 1) 0%,rgba(62, 20, 123, 1) 20%,rgba(226, 0, 121, 1) 40%,rgba(223, 19, 44, 1) 60%,rgba(243, 239, 21, 1) 80%,rgba(0, 152, 71, 1) 100%); background: linear-gradient(90deg,rgba(0, 165, 223, 1) 0%,rgba(62, 20, 123, 1) 20%,rgba(226, 0, 121, 1) 40%,rgba(223, 19, 44, 1) 60%,rgba(243, 239, 21, 1) 80%,rgba(0, 152, 71, 1) 100%); } </style> </head> <body> <div> В этом блоке показан пример использования градиента CSS. </div> </body> </html>

Результат

В этом блоке показан пример использования градиента CSS.