repeating-linear-gradient - Повтор линейного радиента
CSS-функция repeating-linear-Gradient () создает изображение, состоящее из повторяющихся линейных градиентов. Он похож на linear-Gradient и принимает те же аргументы, но он повторяет остановки цвета бесконечно во всех направлениях, чтобы покрыть весь контейнер.
Длина повторяющегося градиента - это расстояние между первым и последним цветовым ограничителем. Если первый цвет не имеет длины цветовой остановки, длина цветовой остановки по умолчанию равна 0. При каждом повторении позиции цветовых остановок сдвигаются кратно длине основного линейного градиента. Таким образом, положение каждой конечной цветовой остановки совпадает с начальной цветовой остановкой; если значения цвета отличаются, это приведет к резкому визуальному переходу.
Для градиента можно использовать полупрозрачные цвета и накладывать его на обычную картинку.
Синтаксис написания аналогичен linear-gradient - смотреть
Три распостраненых способа использования линейного градиента:
Вариант 1:
background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);Вариант 2:
background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);Вариант 3:
background: repeating-linear-gradient(transparent, #4d9f0c 40px),
repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);===
Читать о повторе градиента - repeating-linear-gradient
Примеры линейных градиентов как фона - смотреть
Онлайн генератор градиента - http://www.colorzilla.com/gradient-editor/
| Chrome | Edge | Firefox | Internet | Opera | Safari |
| 26 | Yes | 16 | 10 | 12.1 | 6.1 |
| Android | Chrome | Edge | Firefox | Opera | Safari | Samsung |
| Yes | Yes | Yes | 16 | Yes | Yes | Yes |