Функция linear-gradient задает линейный градиент.

Данная функция применяется к свойствам, которые задают картинку фона: background, background-image или картинку границы: border-image, background-image-source.

См. все функции для работы с CSS градиентами: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient.

Синтаксис

селектор {
	background: linear-gradient([угол или направление], цвет1 размер1, цвет2 размер2, цвет3 размер3...)
}

Можно задавать несколько градиентов, перечисляя их через запятую (главное чтобы они не перекрывали друг друга иначе победит только один из них):

селектор {
	background: 
	linear-gradient(to right, red 0px, blue 30px, transparent 30px), 
	radial-gradient(circle closest-side at center, green, transparent);

}

Особенности

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

Самый простой вариант

Синтаксис:

селектор {
	background: linear-gradient(начальный цвет, конечный цвет);
}

Посмотрим на примере:

селектор {
background: linear-gradient(red, white);
}

Результат выполнения кода:

Добавляем угол

Синтаксис:

селектор {
	background: linear-gradient(угол, начальный цвет, конечный цвет);
}

Посмотрим на примере:

селектор {
	background: linear-gradient(45deg, red, white);
}

Результат выполнения кода:

Добавляем направление

Вместо угла можно добавить направление: top, left, right, bottom. Или комбинацию направлений: top left, top right и так далее.

Обратите внимание на то, что перед направлением ставится слово to: to top, to bottom и так далее. В старых браузерах to не использовалось. При этом запись работает так: to top - это градиент снизу вверх, а просто top - это градиент сверху вниз. Современные браузеры понимают градиент только с to.

Синтаксис:

селектор {
	background: linear-gradient(направление, начальный цвет, конечный цвет);
}

Посмотрим на примере:

селектор {
	background: linear-gradient(to left, red, white);
}

Результат выполнения кода:

селектор {
	background: linear-gradient(to top left, red, white);
}

Результат выполнения кода:

Добавляем размер

Синтаксис:

селектор {
	background: linear-gradient(цвет1 размер1, цвет2 размер2);
}

Посмотрим на примере:

селектор {
	background: linear-gradient(red 30px, blue 50px);
}

В данном случае поведение следующее (и очень неожиданное!): чистый красный цвет будет от 0px до 30px, от 30px до 50px будет градиент от красного до голубого, а от 50px и до конца - чистый голубой:

Результат выполнения кода:

Добавляем более чем 2 цвета

Синтаксис:

селектор {
	background: linear-gradient(цвет1 размер1, цвет2 размер2, цвет3 размер3...);
}

Посмотрим на примере:

селектор {
background: linear-gradient(red 30px, blue 50px, green 70px);
}

В данном случае поведение следующее: чистый красный цвет будет от 0px до 30px, от 30px до 50px будет градиент от красного до голубого, а от 50px и до 70px - градиент от голубого до зеленого, а после 70px - чистый зеленый:

Результат выполнения кода:

Резкие переходы

селектор {
	background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
}

В данном случае поведение следующее: чистый красный цвет будет от 0px до 30px, чистый голубой - от 30px до 60px, чистый зеленый - после 60px (red 0px можно и не писать):

Результат выполнения кода:

Размеры можно задавать и в процентах

селектор {
	background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
}

В данном случае поведение следующее: чистый красный цвет будет от 0% до 30%, чистый голубой - от 30% до 60%, чистый зеленый - после 60% (red 0% можно и не писать):

Результат выполнения кода:

Сочетание с background-size

селектор {
	background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
	background-size: 60px 60px;
}

В данном случае поведение следующее: чистый красный цвет будет от 0px до 30px, чистый голубой - от 30px до 60px, при этом все это будет повторяться кусочками по 60px (из-за background-size: 60px;):

Результат выполнения кода:

А вот без background-size при таком же градиенте будет такое:

Результат выполнения кода:

Значения

Значение Описание
Направление Задает определенное направление градиента. Принимаемые значения: top, left, right, bottom или их комбинация: top left, top right и так далее. Порядок слов не важен: можно писать top left и left top, разницы нет. Параметр необязательный: если его не написать, градиент будет идти сверху вниз (как при to top). Обратите внимание на то, что перед направлением в соверменных браузерах ставится слово to.
Угол Угол в любом допустимом в CSS формате. Может быть положительным и отрицательным. Параметр необязательный. Одновременно может быть задан или угол, или направление (или вообще ничего).
Цвет1 Начальный цвет градиента в любом CSS формате.
Цвет2 Конечный цвет градиента в любом CSS формате.

Значение по умолчанию: нет (?).

Примеры

Пример

В данном примере градиент направлен снизу вверх (это значит, что красный будет снизу):

#elem {
	background: red; /* Для старых браузров */
	background: -webkit-linear-gradient(to top, red, white);
	background: -moz-linear-gradient(to top, red, white);
	background: -o-linear-gradient(to top, red, white);
	background: linear-gradient(to top, red, white);
}

Результат выполнения кода:

Пример

В данном примере градиент направлен сверху вниз (это значит, что красный будет сверху):

#elem {
	background: red; /* Для старых браузров */
	background: -webkit-linear-gradient(to bottom, red, white);
	background: -moz-linear-gradient(to bottom, red, white);
	background: -o-linear-gradient(to bottom, red, white);
	background: linear-gradient(to bottom, red, white);
}

Результат выполнения кода:

Пример

Сделаем градиентную границу с помощью border-image (как работает border-image - смотрите по ссылке):

#elem {
	background: green;
	-webkit-border-image: linear-gradient(to bottom, red, blue) 1;
	-moz-border-image: linear-gradient(to bottom, red, blue) 1;
	-o-border-image: linear-gradient(to bottom, red, blue) 1;
	border-image: linear-gradient(to bottom, red, blue) 1;
	border-width: 30px;
	border-style: solid;
	height: 200px;
	width: 200px;
	margin: 0px auto;
}

Результат выполнения кода:

Пример . Несколько градиентов

Зададим одновременно два градиента, линейны и радиальный:

#elem	background: 
		linear-gradient(to right, red 0px, blue 30px, transparent 30px), 
		radial-gradient(circle closest-side at center, green, transparent);
}

Результат выполнения кода:

Пример . Рисуем клеточки как в школьной тетради

Нарисуем клеточки как в школьной тетради. Для этого зададим два повторяющихся градиента под углом в 90 градусов друг к другу:

#elem	background:
		repeating-linear-gradient(transparent, transparent 20px, yellowgreen 20px, yellowgreen 21px),
		repeating-linear-gradient(90deg, transparent, transparent 20px, yellowgreen 20px, yellowgreen 21px);
	background-position: left top;
	border: 2px solid yellowgreen;
}

Результат выполнения кода:

Пример . Рисуем клеточки с помощью background-size

Предыдущий вариант клеточек не всегда работает корректно. Давайте попробуем другой вариант, с помощью двух обычных (неповторяющихся) градиентов и свойства background-size:

#elem	background:
		linear-gradient(mediumvioletred 0px, mediumvioletred 1px, transparent 1px),
		linear-gradient(90deg, mediumvioletred 0px, mediumvioletred 1px, transparent 1px);
	background-size: 10px 10px;
	background-position: left top;
	background-repeat: repeat;
	border: 2px solid mediumvioletred;
}

Результат выполнения кода: