Definition and Usage
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 length of a basic linear gradient (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.
Syntax
Formal grammar: repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
\--------------------------------------/ \-----------------------------------/
Definition of the gradient line List of color stops
where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?
repeating-linear-gradient( 45deg, blue, red ); /* A repeating gradient on 45deg axe starting blue and finishing red */ repeating-linear-gradient( to left top, blue, red); /* A repeating gradient going from the bottom right to the top left starting blue and finishing red */ repeating-linear-gradient( 0deg, blue, green 40%, red ); /* A repeating gradient going from the bottom to top, starting blue, being green after 40% and finishing red */
Values
- <side-or-corner>
- Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional. The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that causes the starting-point to be in the same quadrant as the described corner so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
- <angle>
- An angle of direction for the gradient. See <angle>.
- <color-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> along the gradient axis). Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
Examples
#grad1 {
background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
}
#grad2 {
background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
}
<ol>
<li>repeating gradient
<div id="grad1"></div>
</li>
<li>Zebra pattern
<div id="grad2"></div>
</li>
</ol>
Compatibility
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support (on background and background-image)
|
3.6 (1.9.2)-moz 16.0 (16) |
10.0 (534.16)-webkit | 10.0 | 11.10-o | 5.1-webkit |
On any properties that accept <image>
|
Not supported | (Yes) | NA | NA | (Yes) |
| Legacy webkit syntax | Not supported | 3-webkit | Not supported | Not supported | 4.0-webkit |
Legacy from syntax (without to) |
3.6 (1.9.2)-moz Removed in 16.0 (16) |
10.0 (534.16)-webkit | 10.0 | 11.10-o | 5.1-webkit |
to syntax |
10.0 (10)-moz 16.0 (16) |
26.0 | 10.0 | 11.60-o Presto 2.12 will remove the prefix. |
Not supported |
