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.

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

ChromeOperaFirefoxIEEdgeSafari
10*11.6*3.6*10125.1*

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
5.0-5.1*12*No4*6257

Additional Resources

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag