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

The length of the gradient that repeats is the distance between the first and last color stop. If the first color does not have a color-stop-length, the color-stop-length defaults to 0. With each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient. 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. This can be altered with repeating the first color again as the last color.

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 3 times */
repeating-linear-gradient(45deg, blue, red 33.3%);

/* A repeating gradient going from the bottom right to the top left,
   starting blue and finishing red, repeating every 20px */
repeating-linear-gradient(to left top, blue, red 20px);

/* A gradient going from the bottom to top,
   starting blue, turning green after 40%,
   and finishing red. This gradient doesn't repeat because
   the last color stop defaults to 100% */
repeating-linear-gradient(0deg, blue, green 40%, red);

/* A gradient repeating five times, going from the left to right, 
   starting red, turning green, and back to red */ 
repeating-linear-gradient(to right, red 0%, green 10%, red 20%);

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.
<linear-color-stop>: A color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis). A percentage of 0%, or a length of 0, represents the start of the gradient; the value 100% is 100% of the image size, meaning the gradient will not repeat.
<color-hint>: Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.; 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-list> )
                            \---------------------------------/ \---------------/
                              Definition of the gradient line   List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
  and <color-hint> = [ <percentage> | <length> ]

Examples

Zebra stripes

body {
  width: 100vw;
  height: 100vh;
}

body {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 20px,
      black 20px,
      black 40px);
  /* with multiple color stop lengths */
  background-image: repeating-linear-gradient(-45deg, 
      transparent 0 20px, 
      black 20px 40px);
}

Ten repeating horizontal bars

body {
  width: 100vw;
  height: 100vh;
}

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

Because the last color stop is 10% and the gradient is vertical, each gradient in the repeated gradient is 10% of the height, fitting 10 horizontal bars.

Note: Please see Using CSS gradients for more examples.

Specifications

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`repeating-linear-gradient()`	Chrome Full support 26 Full support 26 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12	Firefox Full support 16 Notes' Full support 16 Notes' Notes' Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency. Full support 3.6 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -moz- Notes' Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. Notes' 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. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Disabled' Prefixed' Implemented with 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.	IE Full support 10 Notes' Full support 10 Notes' Notes' Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: `-ms-filter: progid:DXImageTransform.Microsoft.Gradient()`.	Opera Full support 12.1 Full support 12.1 Full support 15 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' 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. No support 11 — 15 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -o- Notes' 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.	Safari Full support 6.1 Full support 6.1 Full support 5.1 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' 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. Notes' 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.	WebView Android Full support ≤37 Full support ≤37 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 26 Full support 26 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 16 Notes' Full support 16 Notes' Notes' Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency. Full support 4 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -moz- Notes' Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. Notes' 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. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Disabled' Prefixed' Implemented with 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.	Opera Android Full support 12.1 Full support 12.1 Full support 14 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' 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. No support 11 — 14 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -o- Notes' 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.	Safari iOS Full support 6.1 Full support 6.1 Full support 6 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -webkit- Notes' 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. Notes' 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.	Samsung Internet Android Full support 1.5 Full support 1.5 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
Double-position color stops	Chrome Full support 71	Edge Full support 79	Firefox Full support 64	IE No support No	Opera Full support 58	Safari Full support 12.1	WebView Android Full support 71	Chrome Android Full support 71	Firefox Android Full support 64	Opera Android Full support 50	Safari iOS Full support 12.2	Samsung Internet Android Full support 10.0
Interpolation Hints / Gradient Midpoints	Chrome Full support 40	Edge Full support 79	Firefox Full support 36	IE No support No	Opera Full support 27	Safari Full support 6.1	WebView Android Full support 40	Chrome Android Full support 40	Firefox Android Full support 36	Opera Android Full support 27	Safari iOS Full support 6.1	Samsung Internet Android Full support 4.0
`to` keyword	Chrome Full support 26	Edge Full support 12	Firefox Full support 10	IE Full support 10	Opera Full support 12.1	Safari Full support 6.1	WebView Android Full support ≤37	Chrome Android Full support 26	Firefox Android Full support 10	Opera Android Full support 14	Safari iOS Full support 6.1	Samsung Internet Android Full support 1.5
Unitless `0` for <angle>	Chrome Full support 26	Edge Full support 12	Firefox Full support 55 Full support 55 Partial support 46 Notes' Notes' Accepted only in `-webkit-repeating-linear-gradient()` and `-moz-repeating-linear-gradient()`, not `repeating-linear-gradient()`.	IE No support No	Opera Full support 16	Safari Full support 6.1	WebView Android Full support ≤37	Chrome Android Full support 26	Firefox Android Full support 55 Full support 55 Partial support 46 Notes' Notes' Accepted only in `-webkit-repeating-linear-gradient()` and `-moz-repeating-linear-gradient(), not repeating-linear-gradient()`.	Opera Android Full support 14	Safari iOS Full support 6.1	Samsung Internet Android Full support 1.5

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.