The repeating-linear-gradient function

The repeating-linear-gradient function specifies a repeating linear gradient. This means that we set a certain gradient pattern, for example, from 0px to 10px - a gradient from red to blue and this gradient will be repeated throughout the entire block: 0px to 10px, from 10px to 20px, from 20px to 30px and so on.

This function applies to properties that specify a background image: background, background-image or a border image: border-image, background-image-source.

Syntax

selector {
	background: repeating-linear-gradient([direction], color1 length1, color2 length2...);
}

Values

Value	Description
direction	Sets a specific gradient direction in any angle units or with the `top`, `left`, `right`, `bottom` keywords, or a combination thereof. The order of the words is not important. The parameter is optional: if you do not write it, the gradient will go from top to bottom. The direction is preceded by the `to` word.
angle	An angle in any angle units. Can be positive or negative. The parameter is optional. Either the angle or the direction (or nothing at all) can be specified at the same time.
color1	The starting color of the gradient in any color units.
color2	The ending color of the gradient in any color units.
length	Sets the extent of a specific gradient color in any size units.

Example . The simplest option

The gradient will look like this: from 0px to 20px pure red, from 20px to 40px - a gradient from red to blue. And this will repeat from top to bottom (that’s why it’s a repeating gradient):

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Example . Sharp transitions

The gradient will look like this: from 0px to 20px pure red, from 20px to 40px - pure blue (trick is that the second color begins where the first ends). And this will be repeated from top to bottom:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Example . Let's change direction

Now the gradient direction will be from right to left:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Example . Direction in degrees

As the direction, let's set the angle in degrees:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Example . Negative value

Let's make the direction a negative value:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

The repeating-linear-gradient function

Syntax

Values

Example . The simplest option

Example . Sharp transitions

Example . Let's change direction

Example . Direction in degrees

Example . Negative value

See also