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

Функция linear-gradient() (от англ. linear gradient – линейный градиент) используется в качестве значения в свойствах background и background-image и добавляет линейный градиент к фону изображения.

Синтаксис

linear-gradient(
      [<угол> | to <направление>]?,
      <цвет> <стоп-позиция>?,
      [<стоп-позиция>?, <цвет> <стоп-позиция>?]#
)

Значения

<угол> – угол наклона градиентной прямой, проходящей через центр элемента, который отсчитывается относительно вертикальной прямой. При этом значение угла может быть как положительным (отсчет ведется по часовой стрелке), так и отрицательным (отсчет ведется против часовой стрелки). После числового значения сразу и без пробела должно записываться обозначение единицы измерения deg (например, 30deg). Значению 0deg соответствует направление градиента снизу вверх, а значению 90deg - слева направо.
<направление> – направление градиента, которое задается комбинацией допустимых ключевых слов и может использоваться вместо указания значения угла:
- to top – направление градиента снизу вверх (0deg);
- to top right – направление градиента от нижнего левого угла к верхнему правому;
- to right – направление градиента слева направо (90deg);
- to bottom right – направление градиента от верхнего левого угла к нижнему правому;
- to bottom – направление градиента сверху вниз (180deg);
- to bottom left – направление градиента от верхнего правого угла к нижнему левому;
- to left – направление градиента справа налево (270deg);
- to top left – направление градиента от нижнего правого угла к верхнему левому.
<цвет> – цвет в любой доступной в CSS цветовой модели (смотреть).
<стоп-позиция> – координаты точки на градиентной прямой в любых доступных в CSS единицах измерения (смотреть), а также процентах, по достижении которой браузер начнет создавать переход от текущего цвета к следующему в списке. При этом, если два соседних цвета в списке идентичны, то их стоп-позиции разрешается указывать через пробел после требуемого цвета. Например, вместо linear-gradient(0deg, red 10%, red 35%, blue 100%) можно сокращенно записать linear-gradient(0deg, red 10% 35%, blue 100%). Более того, можно вообще не указывать стоп-позиции или указывать только некоторые из них. В таких случаях браузер будет равномерно распределять позиции всех цветов, попадающих в соответствующие промежутки.

Таким образом, функция linear-gradient() принимает в качестве аргументов угол или ключевое слово, обязательное стартовое значение цвета и, как минимум, одно обязательное конечное значение цвета. При этом разрешается через запятую указывать несколько цветов, в случае необходимости дополняя их через пробел точками остановки. Например, запись linear-gradient(30deg, #000000 10%, #ffffff 100%) создает линейный градиент цвета от черного к белому с соответствующими точками остановки вдоль градиентной прямой, которая расположена под углом в 30 градусов относительно вертикальной прямой.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-images-3/#linear-gradients

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/linear-gradient

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
	
		p{
		width: 500px;
		height: 100px;
		margin: 4em;
		padding: 10px;
		}
			
		.background_1{
		background: linear-gradient(90deg, #ff0000 10%, #00ff00 20%, #0000ff 100%);
		}

		.background_2{
		background: linear-gradient(to top, #000000, #ffffff);
		}

		.background_3{
		background: linear-gradient(225deg, #000000, #ffffff);
		}

		.background_4{
		background: linear-gradient(to bottom left, #000000, #ffffff);
		}

		.background_5{
		background: linear-gradient(to right, red 20%, orange 20% 40%, 
		yellow 40% 60%, green 60% 80%, blue 80%);
		}		

	</style>
	
</head>
<body>
	
	<p class="background_1">
		Несколько значений указываются через запятую: <br>
		linear-gradient(90deg, #ff0000 10%, #00ff00 20%, #0000ff 100%)
	</p>
	
	<p class="background_2">
		linear-gradient(to top, #000000, #ffffff)
	</p>
	
	<p class="background_3">
		linear-gradient(225deg, #000000, #ffffff)
	</p>
	
	<p class="background_4">
		linear-gradient(to bottom left, #000000, #ffffff)
	</p>
	
	<p class="background_5">
		Небольшая палитра (не поллитра!).
	</p>
	
</body>
</html>

Пример №1