CSS repeating-linear-gradient() Function

The CSS repeating-linear-gradient() function allows you to create a linear gradient that repeats over and over again infinitely in both directions.

CSS gradients allow you to apply multiple background colors to an element that blend from one color to the next.

Repeating linear gradients are linear gradients where the color stops are repeated infinitely in both directions.

Here's an example:

<style>
  div {
    background: repeating-linear-gradient(gold 15%, orange 30%);
    padding: 30px;
    height: 160px;
    font-family: sans-serif;
    font-size: 1.5em;
  }
</style>

<div>
  Repeating linear gradient example.
</div>

To create a repeating linear gradient, use the repeating-linear-gradient() function as a value to any property that accepts images (for example, background-image, background, or border-image properties). CSS gradients use these properties to build an image of the specified gradient.

Repeating linear gradients work the same way that (non-repeating) linear gradients work, except that with repeating linear gradients, the color-stops are repeated infinitely in both directions, with their positions shifted by multiples of the difference between the last specified color-stop's position and the first specified color-stop's position.

Setting the Angle of a Repeating Linear Gradient

Repeating linear gradients are the same as non-repeating linear gradients when it comes to setting the angle.

You can set the angle of the gradient line so that the gradient runs along that angle. You can specify this angle in degrees (e.g. 45deg, 90deg, 180deg) or with one of the keywords for specifying the angle (such as to top, to bottom, to top left, etc).

The previous example uses the default direction of to bottom, which results in the gradient repeating vertically.

Here's an example of using the to top right keyword:

<style>
  div {
    background: repeating-linear-gradient(to top right, gold 15%, orange 30%);
    padding: 30px;
    height: 160px;
    font-family: sans-serif;
    font-size: 1.5em;
  }
</style>

<div>
  Repeating linear gradient example.
</div>

Keywords can specify a side of the box (e.g. to top) or a corner (e.g. top top right. See Possible Values below for a full list of available keywords.

Creating Smooth Transitions

The previous examples use sharp transitions between the last color of a gradient and the first color of the next one.

You can change this to use smooth transitions between these colors if required. This will create more of a "blurred" effect between the colors. All you need to do is make the start color the same as the end color.

The following example is exactly the same as the previous one, except in this one I've added orange to the start of the color stops.

<style>
  div {
    background: repeating-linear-gradient(to top right, orange, gold 15%, orange 30%);
    padding: 30px;
    height: 160px;
    font-family: sans-serif;
    font-size: 1.5em;
  }
</style>

<div>
  Repeating linear gradient example.
</div>

Creating Stripes

You can use the "sharp transition" technique to create patterns that wouldn't normally be associated with gradients.

For example, you can use repeating linear gradients to create stripes. Like this:

<style>
  div {
    height: 200px;
    background: repeating-linear-gradient(165deg, gold, gold 60px, orange 60px, orange 120px);
  }
</style>

<div></div>

Check out these CSS patterns if you're interested in this concept.

Official Syntax

The repeating-linear-gradient() function uses the same syntax as the linear-gradient() function, which is as follows:

And here's the syntax for color stops:

Possible Values

As indicated in the official syntax, the repeating-linear-gradient() function accepts the following values:

angle

Specifies an angle for the direction of the gradient. For example, 45deg.

side-or-corner

The following keywords specify a side to point the gradient line:

to top: Same as 0deg.
to right: Same as 90deg.
to bottom: Same as 180deg.
to left: Same as 270deg.

The following keywords specify a corner to point the gradient line:

to top left: The gradient line is angled such that it points into the same quadrant as the top left corner, and a line drawn perpendicular to the gradient line through the center of the gradient box intersects the two neighboring corners.
to top right: The gradient line is angled such that it points into the same quadrant as the top right corner, and a line drawn perpendicular to the gradient line through the center of the gradient box intersects the two neighboring corners.
to bottom right: The gradient line is angled such that it points into the same quadrant as the bottom right corner, and a line drawn perpendicular to the gradient line through the center of the gradient box intersects the two neighboring corners.
to bottom left: The gradient line is angled such that it points into the same quadrant as the bottom left corner, and a line drawn perpendicular to the gradient line through the center of the gradient box intersects the two neighboring corners.

color-stop

A color stop is a color value, followed by an optional stop position. The stop position, if specified, can be provided in a percentage or length value.

CSS Specifications

The repeating-linear-gradient() function is defined in CSS Image Values and Replaced Content Module Level 3 (W3C Candidate Recommendation 17 April 2012)
It's also being further defined in CSS Image Values and Replaced Content Module Level 4 (Editorâ€™s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.