CSS Repeating Gradients

Avatar of Geoff Graham
Geoff Graham on (Updated on )

Repeating gradients take a trick we can already do with the creative use of color-stops on the linear-gradient() and radial-gradient() notations, and bakes it in for us.

The idea is that we can create patterns out of the gradients we create and allow them to repeat infinitely.

Comparing a linear gradient (left) to a repeating linear gradient (right).

There is a trick, with non-repeating gradients, to create the gradient in such a way that if it was a little tiny rectangle, it would line up with other little tiny rectangle versions of itself to create a repeating pattern. So essentially create that gradient and set the background-size to make that little tiny rectangle. That made it easy to make stripes, which you could then rotate or whatever.

Syntax

There are three types of repeating gradients, two of which are currently supported in the official specification and one that is in the current working draft.

The syntax for each notation is the same as its related gradient type. For example, repeating-linear-gradient() follows the same syntax as linear-gradient().

Repeating Gradient Related Notation Supported?
repeating-linear-gradient() linear-gradient() Yes
repeating-radial-gradient radial-gradient() Yes
repeating-conic-gradient conic-gradient() No

Where the gradient repeats is determined by the final color stop. If that’s at 20px, the size of the gradient (which then repeats) is a 20px by 20px square. The same is true if there are multiple colors chained to the pattern. The final color with the final stop is what determines the size and location of the repeat.

.repeat {
  background-image: 
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* determines size */
    );
}

See the Pen lAkyo by Chris Coyier (@chriscoyier) on CodePen.

Same with radial:

.repeat {
  background: 
    repeating-radial-gradient(
      circle at 0 0, 
      #eee,
      #ccc 50px
    );
}

See the Pen Repeating Gradients by Chris Coyier (@chriscoyier) on CodePen.

Browser Support

Repeating gradients currently enjoy great browser support. That said, we’re only talking about linear and radial gradients at the time of this writing because conical gradients are still a proposed feature in the Level 4 working draft of the specification. Here’s to hoping we see wide adoption once it reaches candidate recommendation.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
10*3.6*10125.1*

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
1221234*5.0-5.1*

Additional Resources