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.
/* 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);
<side-or-corner>
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
.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>
0deg
is equivalent to to top
; increasing values rotate clockwise from there.<color-stop>
<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.
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> ]?
body { background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, black 20px, black 40px); }
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.
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 3 The definition of 'repeating-linear-gradient()' in that specification. | Candidate Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 26
|
12 | 16
|
10
|
12.1
|
6.1
|
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
|
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 | 16
|
Yes
|
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
|
Yes | Yes | Yes |
linear-gradient()
, radial-gradient()
, repeating-radial-gradient()
© 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