repeating-linear-gradient
The CSS repeating-linear-gradient function creates an <image> of a repeating gradients. It works similarly, and takes the same arguments, to the basic linear gradients, as described by linear-gradient, but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stop’s position and the first one’s position.
The consequence is that an end color of a gradient always coincide with a start color. If both are not identical, this will result in a sharp transition.
Like any other gradient, a repeating CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.
Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background. You specify a gradient value instead of an image URL.
Example
<html lang="en">
<head>
<style>
body {
background-image: repeating-linear-gradient(45deg,
red 0px, red 3px, blue 3px, blue 6px);
}
</style>
</head>
<body>
<div class="bar">
</div>
</body>
</html>
