repeating-linear-gradient()

The CSS repeating-linear-gradient() function creates a repeating gradient that places colors along a straight line and smoothly transitions between them. We define a section of the gradient, which then gets repeated until it fills the available space.

.element {
  background-image: repeating-linear-gradient(in oklab, tomato, slateblue, tomato 50%);
}

Gradients are actually images generated by the browser, so they are mainly used with the background-image property to easily set an element’s background.

The repeating-linear-gradient() function is defined in the CSS Images Module Level 3 and Level 4 specifications.

Check out the CSS Gradients Guide to learn more about gradient features.

Syntax

linear-gradient([ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list>)

The “formal” syntax is much more complex. Put simply, it says that we can create a gradient that spans in a certain direction or at a specific angle, starting with a color at one location and ending with another color at another location. Then, the pattern is repeated to fill the up the entire space.

Arguments

The repeating-linear-gradient() function accepts up to three arguments.

<angle> | to <side-or-corner>

In a repeating-linear-gradient(), colors are cast along a straight line whose direction can be specified through an <angle> or keywords. Initially, the line is at 180 degrees and colors are cast from top to bottom (i.e., to bottom).

• Using an <angle>, we can move the end of the gradient line (where the last defined color lies) clockwise by an angle.
• Alternatively, we can write the to keyword followed by a side or corner, using the left, right and top, bottom keywords to specifiy the direction of the gradient line. They can be used by themselves (to left, to top) to indicate a side or joined (to lef top, to right bottom) for a corner.

<color-stop-list>

Defines the colors used and their position on the gradient, all in a comma-separated list. Each color stop has a given <color> followed by two optional <length-percentage> values.

• A single <color> value lets CSS decide where to place the color.
• A <color> <length-percentage> value defines where the given color should be found.
• Lastly, <color> <length-percentage> <length-percentage> defines a starting and ending point for the color to span.

In a repeating-linear-gradient(), we will usually at least define the last color’s position. That way, the color stops is repeated in multiples based on the distance between where the first and last colors stop. If we don’t provide any position at all, the gradient acts just like a regular ol’ linear-gradient().

<color-interpolation-method>

This argument defines the color space used and the path between two colors. We start with the in keyword followed by one of the many color spaces defined in CSS:

<color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65
<polar-color-space> = hsl | hwb | lch | oklch

It can be either written at the beginning of repeating-linear-gradient() or just before defining the <color-stop-list>.

If the color space uses polar coordinates (e.g., hsl, hwb, lch and oklch), then we can define the path between colors using the <hue-interpolation-method> syntax.

Basic usage

The repeating-linear-gradient() function is based on practically the same exact syntax as the linear-gradient() function, so the same arguments work for both functions.

However, if we define a gradient’s colors without starting and ending points, like this:

.element {
  background-image: repeating-linear-gradient(crimson, teal);
}

…the pattern does not repeat:

That’s because, without color positions, CSS places the colors as if they were contained in a normal gradient. So, to make them properly repeat, we need to define a position for at least the last color in the set.

For example, we can make the gradient repeat four times by only defining colors along 25% of the gradient box:

.element {
  background-image: repeating-linear-gradient(teal, crimson, teal 25%);
}

The gradient box refers to the area where the gradient is displayed. It’s usually the element’s border box, but it can be modified through the background-size property. Learn more about the CSS Box Model in this article.

You’ll also notice that we defined the last color again at the beginning. Otherwise, the ending color won’t fade into the starting color of the next repetition, leaving a hard stop between the colors.

Rotating the gradient

By default, gradients go in a top-to-bottom direction (i.e., to bottom or 180deg). But we can rotate the gradient either by an <angle> or using position keywords.

Using angles, we have that 0deg points the gradient upwards. From there, we can rotate the gradient clockwise by a given angle:

.element-60 {
  background: repeating-linear-gradient(60deg, midnightblue, lightskyblue, midnightblue 33%);
}

.element-150 {
  background: repeating-linear-gradient(150deg, crimson, pink, crimson 25%);
}

.element-195 {
  background: repeating-linear-gradient(195deg, aquamarine, darkviolet, aquamarine 50%);
}

.element-315 {
  background: repeating-linear-gradient(315deg, darkgreen, moccasin, darkgreen 20%);
}

Here, I used degrees, but we might have used any other <angle> unit:

• Degrees (deg, the one I used)
• Gradians (grad)
• Percentages (%)
• Radians (rad)
• Turns (turn)

I also mentioned that we can use certain keywords to alter a linear gradient’s direction:

• top
• bottom
• left
• right

And guess what? We can combine those keywords to form top to four more directions — for a grand total of eight directions!

• top left
• top right
• bottom left
• bottom right

And, naturally, let’s not forget that we specify the direction keyword after the to keyword. Here are several examples using different keyword combinations:

.element-to-top {
  background: repeating-linear-gradient(to top, midnightblue, lightskyblue, midnightblue 33%);
}

.element-top-bottom-right {
  background: repeating-linear-gradient(to bottom right, crimson, pink, crimson 25%);
}

.element-to-left {
  background: repeating-linear-gradient(to left, aquamarine, darkviolet, aquamarine 50%);
}

.element-to-bottom-left {
  background: repeating-linear-gradient(to bottom left, darkgreen, moccasin, darkgreen 20%);
}

Hard color stops

We can also create gradients without smooth transitions between colors, but “hard” color stops instead where one color immediately ends and the next one begins.

We specify each color position right after the next color, creating no overlap at all between the colors:

.element {
  background: repeating-linear-gradient(45deg, slateblue 0px 75px, ghostwhite 75px 150px);
}

Background patterns

Using repeating-linear-gradient() and hard color stops, we can make a variety of patterns in CSS. For example, we can stack two linear gradients on top of each other to create a vine background. We define both gradients inside the background-image property, separating the background values with commas.

.element {
  background-image:
    repeating-linear-gradient(45deg, salmon 0px 50px, transparent 50px 150px), 
    repeating-linear-gradient(315deg, salmon 0px 50px, papayawhip 50px 150px);
}

Just remember, the backgrounds are quite literally stacked on top of each other, meaning that the gradient defined first is placed on top, and hence needs a transparent color to reveal the others.

Demo

Specification

The repeating-linear-gradient() function is defined in the CSS Images Module Level 3 and Level 4 specifications, which are currently in Editor’s Draft. Lastly, the color interpolation methods are defined in the CSS Color Module Level 4.

Browser support

Both the repeating-linear-gradient() function and the interpolation method syntax are supported across all browsers.

More on CSS gradients

Related tricks!

Related