The repeating-linear-gradient
function repeats a linear color gradient.
This function is used by background and background-image properties.
An element with a repeating linear background.
<style>
.linear-repeat {
background-image: repeating-linear-gradient(
orangered 10%, purple 30%);
height: 250px;
}
</style>
<div class="linear-repeat"></div>
The repeating-linear-gradient
function has the same arguments as the linear-gradient function.
This difference is that the gradients are repeated.
repeating-linear-gradient(direction, color-stop-1, color-stop-2, ..., color-stop-n);
Value | Description |
---|---|
direction |
Optional. Specifies the starting point and direction of the linear gradient. Default is top-to-bottom. Valid values include: to right , to top , to left , and to bottom .
These are equivalent to 90deg , 180deg , 270deg , and 0deg .
Custom directions can be specified as 20deg , 165deg , etc.
|
color-stop-1, |
Color stops to create the gradient. Each stop is a color value with optional stop position. Stop positions are expressed as a length value or a percentage. |
A diagonally repeating-linear-gradient
(45deg).
<style>
.linear-example-diagonal {
background-image: repeating-linear-gradient(45deg,
rgb(48, 46, 163) 10%, rgb(119, 60, 236) 30%);
height: 150px;
}
</style>
<div class="linear-example-diagonal"></div>
This table shows when repeating-linear-gradient
support started for each browser.
Chrome
|
26.0 | Mar 2013 |
Firefox
|
16.0 | Oct 2012 |
IE/Edge
|
10.0 | Sep 2012 |
Opera
|
12.1 | Nov 2012 |
Safari
|
6.1 | Jun 2013 |