<?xml version="1.0" encoding="utf-8"?>

CSS repeating-linear-gradient function

CSS repeating-linear-gradient function Bad Practice
CSS repeating-linear-gradient function Best Practice

Gradients can form a pattern, and the repeating-linear-gradient function can save you from the pain of writing the same thing over and over again. The syntax doesn't differ from the average linear-gradient function and contains at least 2 color stops. To set a diagonal direction like in the example, you should specify the angle or direction.

The percentage values here define the color stops — the points where the line has a specific color. For example, the 0 point means the starting position for a purple line, and 10px refers to its ending point. The white line starts at 10px and ends at 20px — the function takes this rhythm to create a repeating gradient.

Improve your UX & Product skills with interactive courses that actually work