Функция repeating-linear-gradient

Функция repeating-linear-gradient задает повторяющийся линейный градиент. Это значит, что мы задаем определенный узор градиента, например, от 0px до 10px - градиент от красного к голубому и этот градиент будет повторяться на весь блок: 0px до 10px, от 10px до 20px, от 20px до 30px и так далее.

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

Синтаксис

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

Значения

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

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

Градиент будет выглядеть так: от 0px до 20px чистый красный цвет, от 20px до 40px - градиент от красного к голубому. И так будет повторяться сверху вниз (на то он и повторяющийся градиент):

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Пример . Четкие цвета

Градиент будет выглядеть так: от 0px до 20px чистый красный цвет, от 20px до 40px - чистый голубой (фишка в том, что второй цвет начинается там, где заканчивается первый). И так будет повторяться сверху вниз:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Пример . Сменим направление

Сейчас направление градиента будет справа налево:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Пример . Направление в градусах

В качестве направления зададим угол в градусах:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Пример . Отрицательное значение

Сделаем направление отрицательным значением:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Смотрите также

функцию repeating-radial-gradient,
которая создает повторяющийся радиальный градиент
функцию linear-gradient,
которая создает линейный градиент
функцию radial-gradient,
которая создает радиальный градиент