CSS repeating-linear-gradient() function
Example
Repeating linear gradient:
Try it Yourself »
Definition and usage
The repeating-linear-gradient() function is used to create repeating linear gradient background images.
The repeating-linear-gradient() function works in a manner similar to linear-gradient(), but after reaching the specified end point, the image repeats itself.
Basic usage:
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
This creates a linear gradient that repeats at a 45-degree angle. Red starts, yellow is at 10%, and green is at 20%, after which it repeats.
Striped background:
background: repeating-linear-gradient(90deg, blue, blue 10px, white 10px, white 20px);
This creates a horizontal striped background, with each blue and white stripe being 10 pixels wide.
Diagonal striped background
background: repeating-linear-gradient(135deg, black, black 15px, transparent 15px, transparent 30px);
This creates repeating black and transparent diagonal stripes at a 135-degree angle, each stripe being 15 pixels wide.
Create zebra stripe background
background: repeating-linear-gradient(90deg, #fff, #fff 10px, #000 10px, #000 20px);
Rainbow stripe background
background: repeating-linear-gradient(45deg, red, orange 20px, yellow 40px, green 60px, blue 80px, indigo 100px, violet 120px);
Browser Support
The number in the table indicates the first browser version that supports the function.
The number specified with the "webkit", "moz", or "o" prefix is the first version number prefix that supports the function.
| Function | |||||
|---|---|---|---|---|---|
| repeating-linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
CSS Syntax
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
| Value | Description |
|---|---|
| angle | Defines the angular direction of the gradient. From 0deg to 360deg, defaulting to 180deg. |
| side-or-corner | Specifies the starting position of the linear gradient. It consists of two keywords: the first specifies the horizontal position (left or right), and the second specifies the vertical position (top or bottom). The order is arbitrary, and each keyword is optional. |
| color-stop1, color-stop2,... | Specifies the color stop points in the gradient. Both color and position can be specified, such as color 50%, meaning the color is at the 50% position of the gradient. |
More Examples
Example
Different repeating linear gradients:
Try it Yourself »
CSS Tutorial:CSS3 Gradients
other extensions