repeating-linear-gradient()

CSS функция repeating-linear-gradient() создаёт изображение состоящее из повторяющихся линейных градиентов. Она схожа с linear-gradient и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа <gradient> (en-US), являющегося разновидностью типа данных <image> (en-US).

/* Повторяющийся градиент с углом наклона 45 градусов,
   начинающийся с синего и заканчивающийся красным цветом */
repeating-linear-gradient(45deg, blue, red);

/* Повторяющийся градиент идущий от нижнего правого угла к верхнему левому,
   начинающийся с синего и заканчивающийся красным цветом */
repeating-linear-gradient(to left top, blue, red);

/* Повторяющийся градиент идущий от низа к верху,
   начинающийся с синего, переходящего в зелёный на 40%,
   и заканчивающийся красным цветом */
repeating-linear-gradient(0deg, blue, green 40%, red);

С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведёт к резкому визуальному переходу.

Повторяющийся линейный градиент (как и любой прочий градиент) не имеет размерностей по умолчанию; т.е. у него нет предопределённого размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применён.

<сторона-или-угол>

Положение точки начала линии градиента. Начинается со слова to и максимум двух ключевых слов: одно определяет сторону по горизонтали (left или right), и другое сторону по вертикали (top или bottom). Порядок ключевых слов определяющих сторону не важен. Если они не определены, по умолчанию используется to bottom.

Значения to top, to bottom, to left, и to right эквивалентны углам 0deg, 180deg, 270deg, и 90deg соответственно. Прочие значения транслируются в угол.

<угол>

Угол наклона линии направления градиента. Значение 0deg эквивалентно to top; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (0deg).

<цвет-позиция>

Значение <цвета> с последующей (необязательной) его позицией (либо в <процентах>, либо в единицах <длины> вдоль оси градиента).

Примечание: Рендер перехода цветов в CSS градиентах следует тем же правилам что и в SVG градиентах.

repeating-linear-gradient(  [ <угол> | to <сторона-или-угол> ,]? <цвет-позиция> [, <цвет-позиция>]+ )
                            \---------------------------------/ \----------------------------/
                              Определение линии градиента         Список цветов и их позиций

где <сторона-или-угол> = [left | right] || [top | bottom]
   и <цвет-позиция>    = <цвет> [ <процент> | <длина> ]?

body {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 20px,
      black 20px,
      black 40px);
}

body {
  background-image: repeating-linear-gradient(to bottom,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}

• Using CSS gradients
• Другие функции градиентов: linear-gradient, radial-gradient, repeating-radial-gradient (en-US)