The CSS repeating-linear-gradient
function creates an <image>
consisting of repeating gradients. It works similarly to the basic linear gradients as described by linear-gradient()
, and takes the same arguments. However, it automatically repeats the color stops infinitely in both directions. The color stops' positions shift by multiples of the length of a basic linear gradient (the difference between the last color stops' position and the first).
The consequence is that an end color of a gradient always coincides with a start color. If both are not identical, then 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.
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 */
<side-or-corner>
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.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>
<angle>
.<color-stop>
<color>
value, followed by an optional stop position (either a percentage between 0% and 100% or a <length>
along the gradient axis).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> ]?
#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>
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 |
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 hint (a percent without a color) | 36 (36) | 40 | ? | 27 | (Yes)[6] |
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
.
radial-gradient()
, linear-gradient()
, repeating-radial-gradient()
;background-image
, background
.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient