repeating-linear-gradient()

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.

Syntax

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.

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 gradient
    <div id="grad1"></div>
  </li>
  <li>Zebra pattern   
    <div id="grad2"></div>
  </li>     
</ol>

div {
  display: block;
  width: 50%;
  height: 80px;
  border-color: #000000;
  padding: 10px;
}

#grad1 {
  background-image: -moz-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
  background-image: -webkit-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
  background-image: -o-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
  background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
}

#grad2 {
  background-color: black;
  background-image: -moz-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  background-image: -o-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  background-image: -ms-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  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>

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

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 26	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.