# Функция 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` или их комбинацией. Порядок слов не важен. Параметр необязательный: если его не написать, градиент будет идти сверху вниз. Перед направлением ставится слово `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`,
  которая создает радиальный градиент

← →
↑
en ru