CSS Repeating Gradients

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.

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().

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.

Additional Resources

• CSS Image Values and Replaced Content Module Level 3: This is where the concept of repeating gradients was introduced into the official spec, but only for repeating linear and radial gradients
• SS Image Values and Replaced Content Module Level 4: This is the current working draft where conical gradients are being considered for inclusion to the official spec.
• CSS3 Patterns Gallery: Lea Verou has put together a showcase of tricky gradient patterns, including many that use the repeating gradient technique.