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 |
