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

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

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

Синтаксис

селектор {
	background: repeating-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: repeating-linear-gradient(цвет1 размер1, цвет2 размер2);
}

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

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

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

Четкие цвета

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

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

селектор {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
}

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

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

Направление можно задавать углом в любом допустимом в CSS формате (положительным или отрицательным) или ключевыми словами top, left, right, bottom. Так же можно использовать комбинацию ключевых слов: top left, top right и так далее.

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

селектор {
	background: repeating-linear-gradient(направление, цвет1 размер1, цвет2 размер2);
}
селектор {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
}

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

Значения

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

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

Примеры

Пример

В данном примере будут повторяющиеся наклонные полоски:

#elem {
	background: -webkit-repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	background: -moz-repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	background: -o-repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
}

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