CSS repeating-linear-gradient() Function

Previous Page CSS repeating-conic-gradient() function
Next Page CSS repeating-radial-gradient() function
Go to the Previous Level CSS Function Reference Manual

Definition and Usage

CSS repeating-linear-gradient() The function is used for repeating linear gradients.

Example:

Linear Gradient	Repeating Linear Gradient

linear-gradient(red, yellow, blue);	repeating-linear-gradient(red, yellow 10%, blue 20%);

Example

Example 1

A repeating linear gradient:

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

Try it yourself

Example 2

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%);
}

Try it yourself

CSS syntax

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

Value	Description
angle	Define the angle of the gradient direction. From 0deg to 360deg. The default value is 180deg.
side-or-corner	Define the position of the starting point of the gradient line. It consists of two keywords: the first represents the horizontal direction (left or right), and the second represents the vertical direction (top or bottom). The order is not important, and each keyword is optional.
color-stop1, color-stop2,...	Color stopping points are the colors you want to present with smooth transitions between them. This value consists of color values and one or two optional stopping positions (percentages between 0% and 100% or lengths along the gradient axis).

Value

Description

angle

Define the angle of the gradient direction. From 0deg to 360deg. The default value is 180deg.

side-or-corner

Define the position of the starting point of the gradient line.

It consists of two keywords: the first represents the horizontal direction (left or right), and the second represents the vertical direction (top or bottom).

The order is not important, and each keyword is optional.

color-stop1, color-stop2,...

Color stopping points are the colors you want to present with smooth transitions between them.

This value consists of color values and one or two optional stopping positions (percentages between 0% and 100% or lengths along the gradient axis).