The repeating-linear-gradient() CSS function creates an <image> consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. The function's result is an object of the <gradient> data type, which is a special kind of <image>.
/* A repeating gradient tilted 45 degrees, starting blue and finishing red */ repeating-linear-gradient(45deg, blue, red); /* A repeating gradient going from the bottom right to the top left, starting blue and finishing red */ repeating-linear-gradient(to left top, blue, red); /* A repeating gradient going from the bottom to top, starting blue, turning green after 40%, and finishing red */ repeating-linear-gradient(0deg, blue, green 40%, red);
With each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient (the distance between the last color stop and the first). Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition.
As with any gradient, a repeating linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.
Usage note: Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, repeating-linear-gradient() won't work on background-color and other properties that use the <color> data type.
Syntax
Values
<side-or-corner>- The position of the gradient line's starting point. If specified, it consists of the word
toand up to two keywords: one indicates the horizontal side (leftorright), and the other the vertical side (toporbottom). The order of the side keywords does not matter. If unspecified, it defaults totobottom. - The values
to top,to bottom,to left, andto rightare equivalent to the angles0deg,180deg,270deg, and90degrespectively. The other values are translated into an angle. <angle>- The gradient line's angle of direction. It starts from
to topand rotates clockwise. <color-stop>- A color-stop's
<color>value, followed by an optional stop position (either a<percentage>or a<length>along the gradient's axis). -
Note: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.
Formal syntax
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> ]?
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 horizontal bars
<div id="grad1"></div>
</li>
<li>Zebra stripes
<div id="grad2"></div>
</li>
</ol>
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Image Values and Replaced Content Module Level 3 The definition of 'repeating-linear-gradient()' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support (on background and background-image) |
3.6 (1.9.2)-moz[3] 16 (16)[5] |
10.0 (534.16)-webkit [2][3] | 10.0 [1] | 11.10-o [3] | 5.1-webkit[2][3] |
On border-radius |
29 (29) | (Yes) | (Yes) | (Yes) | (Yes) |
On any other property that accept <image> |
No support | (Yes) | (Yes) | (Yes) | (Yes) |
| Legacy webkit syntax | No support | 3-webkit [2] | No support | No support | 4.0-webkit[2] |
Legacy from syntax (without to) |
3.6 (1.9.2)-moz[4] Removed in 16 (16)[7] |
10.0 (534.16)-webkit [2] | 10.0 | 11.10-o[4] | 5.1-webkit[2] |
to syntax |
10 (10)-moz[4] 16 (16) |
26.0 | 10.0 | 11.60-o[4] Presto 2.12 will remove the prefix. |
No support |
| Interpolation hints/gradient midpoints (a percent without a color) | 36 (36) | 40 | ? | 27 | (Yes)[6] |
Unitless 0 for <angle> |
46 (46)-webkit[8] No support[9] |
(Yes) | Edge 12 | (Yes) | (Yes) |
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera (Presto) | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 (1.9.2)-moz[3] 16.0 (16)[5] |
16-webkit |
10 | (Yes) | (Yes)[6] |
[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.
[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.
[3] Gecko, Opera & Webkit considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:
-moz-repeating-linear-gradient(to top left, blue, red);
is the same as:
-moz-repeating-linear-gradient(bottom right, blue, red);
The legacy syntax, without to, is planned to go away when the prefix is removed.
[5] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.
[6] WebKit bug 1074056.
[7] In addition to the unprefixed support using the standard syntax, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.
[8] In -webkit-linear-gradient function (handled below), Gecko accept unitless 0 for angles, to match webkit/blink,See bug 1239153.
[9] See bug 1363292.
See also
- Using CSS gradients
- Other gradient functions:
linear-gradient(),radial-gradient(),repeating-radial-gradient()