CSS repeating-linear-gradient() Function

CSS Functions

Example

Repeating linear gradient:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Definition and Usage

The repeating-linear-gradient() function is used to create a repeating linear gradient "image".

Supported Versions: CSS3

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Numbers prefixed with "webkit" or "moz" or "o" indicate the first version that supported the function with a prefix.

Function	Chrome	Edge	Firefox	Safari	Opera
repeating-linear-gradient()	26.0 <br>10.0 -webkit-	10.0	16.0 <br>3.6 -moz-	6.1 <br>5.1 -webkit-	12.1 <br>11.1 -o-

CSS Syntax

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

Value	Description
angle	Defines the gradient angle direction. From 0deg to 360deg, default is 180deg.
side-or-corner	Specifies the starting position of the linear gradient. Composed of two keywords: the first specifies the horizontal position (left or right), the second specifies the vertical position (top or bottom). The order is arbitrary, and each keyword is optional.
color-stop1, color-stop2,...	Specifies the start and end colors of the gradient, composed of a color value and an optional stop position (specified as a percentage).

More Examples

Example

Different repeating linear gradients:

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}

#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}

#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

CSS Tutorial: CSS3 Gradients

CSS Functions

❮ Pr Class Cursor Css3 Pr Box Orient ❯