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>.
Safe to Use
repeating-linear-gradient() is considered safe to use.
It’s supported by 94% of global browsers.
Browsers
Version Breakdown
Full Support
Implemented with the vendor prefix: -webkit-
Full Support
Implemented with the vendor prefix: -webkit-
Full Support
Full Support
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Implemented with the vendor prefix: -webkit-
Implemented with 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.
Full Support
Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Implemented with the vendor prefix: -webkit-
Implemented with 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.
Full Support
Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Full Support
Implemented with the vendor prefix: -webkit-
Full Support
Implemented with 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.
Implemented with 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.
Full Support
Implemented with 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.
Implemented with 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.
Full Support
Implemented with 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.
Full Support
Implemented with 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.
Full Support
Implemented with the vendor prefix: -webkit-
Full Support
Implemented with the vendor prefix: -webkit-
See Also
- Using CSS gradients
- Other gradient functions:
linear-gradient(),radial-gradient(),repeating-radial-gradient(),conic-gradient(),repeating-conic-gradient() <image>image()element()image-set()cross-fade()