CSS Repeating Gradients

Overview

The repeating-linear-gradient() function allows us to define a repeating radial or linear gradient as a CSS image. This can be used to create gradients that don’t repeat when rotated.

Specifications

CSS Images Module Level 3 # repeating-gradients

Syntax

/* A repeating gradient tilted 45 degrees, starting blue and finishing red, repeating 3 times */
 repeating-linear-gradient(45deg, blue, red 33.3%);
 /* A repeating gradient going from the bottom right to the top left, starting blue and finishing red, repeating every 20px */
 repeating-linear-gradient(to left top, blue, red 20px);
 /* A gradient going from the bottom to top, starting blue, turning green after 40%, and finishing red. This gradient doesn't repeat because the last color stop defaults to 100% */
 repeating-linear-gradient(0deg, blue, green 40%, red);
 /* A gradient repeating five times, going from the left to right, starting red, turning green, and back to red */
 repeating-linear-gradient(to right, red 0%, green 10%, red 20%);

Browser Compatibility