W3cubDocs

/CSS

repeating-linear-gradient()

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

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.

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

/* 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);

Values

<side-or-corner>
The position of the gradient line's starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). The order of the side keywords does not matter. If unspecified, it defaults to to bottom.
The values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively. The other values are translated into an angle.
<angle>
The gradient line's angle of direction. A value of 0deg is equivalent to to top; increasing values rotate clockwise from there.
<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

Zebra stripes

body {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 20px,
      black 20px,
      black 40px);
}

Repeating horizontal bars

body {
  background-image: repeating-linear-gradient(to bottom,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}

Note: Please see Using CSS gradients for more examples.

Specifications

Specification Status Comment
CSS Images Module Level 3
The definition of 'repeating-linear-gradient()' in that specification.
Candidate Recommendation Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 26
26
10
Prefixed
Prefixed Requires the vendor prefix: -webkit-
12 16
16
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
3.6
Prefixed
Prefixed Requires the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
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.
49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
10
10
Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
12.1
12.1
11 — 15
Prefixed
Prefixed Requires the vendor prefix: -o-
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.
15
Prefixed
Prefixed Requires the vendor prefix: -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.
6.1
6.1
5.1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in repeating-linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
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.
to keyword 26 12 10 10 12.1 6.1
Interpolation Hints / Gradient Midpoints 40 No 36 No 27 6.1
Unitless 0 for <angle> 26 12 55
55
46
Accepted only in -webkit-repeating-linear-gradient() and -moz-repeating-linear-gradient(), not repeating-linear-gradient().
No 16 6.1
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes
Yes
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Yes
Yes
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Yes 16
16
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
4
Prefixed
Prefixed Requires the vendor prefix: -moz-
Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
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.
49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Yes
Yes
14
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Yes Yes
to keyword Yes Yes Yes 10 Yes Yes Yes
Interpolation Hints / Gradient Midpoints 40 40 No 36 Yes Yes Yes
Unitless 0 for <angle> Yes Yes 12 55
55
46
Accepted only in -webkit-repeating-linear-gradient() and -moz-repeating-linear-gradient(), not repeating-linear-gradient().
Yes Yes Yes

See also

© 2005–2018 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