The CSS -moz-repeating-linear-gradient Mozilla extension property works similarly to the standard linear gradients as described by -moz-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.
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.
Values[]
| Value | Description |
|---|---|
<point> |
A position, interpreted in the same way as background-position or -moz-transform-origin. This is used to define the starting point of the gradient.
|
<angle> |
An angle of direction for the gradient. Can be negative or positive. Example: 45deg.
|
<stop> |
This value is comprised of a color value, followed by an optional stop position (either a percentage between 0% and 100% or a length value along the gradient axis). Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
|
CSS example:
body {
background:-moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
}
That will produce:
