CSS repeating-linear-gradient() Function

CSS repeating-linear-gradient() Function

The CSS repeating-linear-gradient() function creates an image with a repeating sequence of colors along a straight line.

It works like linear-gradient(), but repeats the color-stop pattern in both directions along the gradient line. It is useful for stripes, decorative backgrounds, repeating color transitions, and patterns created entirely with CSS.

Syntax

repeating-linear-gradient(color-stop, color-stop, ...)
repeating-linear-gradient(direction, color-stop, color-stop, ...)
repeating-linear-gradient(angle, color-stop, color-stop, ...)
repeating-linear-gradient(in color-space, color-stop, color-stop, ...)

The function requires at least two color stops. A direction, angle, or color interpolation method can be specified before the color stops.

For example:

background: repeating-linear-gradient(red, blue 40px);
background: repeating-linear-gradient(to right, red 0px, blue 40px);
background: repeating-linear-gradient(45deg, red 0px, blue 40px);
background: repeating-linear-gradient(in oklab, red 0px, blue 40px);

The function returns a CSS <image> value rather than a standalone color value.

It can be used with properties that accept images, including background-image and background.

Parameters

The repeating-linear-gradient() function accepts color stops and optional settings that control the gradient's appearance.

For example:

repeating-linear-gradient(
  to right,
  #0066cc 0px,
  #00a896 40px
)

This creates a horizontal gradient that transitions from blue to teal over 40px and repeats that transition across the background.

How It Works

The repeating-linear-gradient() function defines a color pattern along a gradient line and repeats it to fill the image.

For example:

.box {
  background: repeating-linear-gradient(
    to right,
    #0066cc 0px,
    #00a896 50px
  );
}

The gradient changes from blue at 0px to teal at 50px.

Because the repeating interval is 50px, the color sequence begins again at each 50px interval.

The pattern repeats in both directions along the gradient line, including when the first color stop is positioned outside the visible area.

The gradient is rendered as an image that fills the available background area according to the applicable background properties.

Unlike a single linear gradient, the last color stop does not simply extend its final color to the end of the image.

Direction and Angles

The gradient direction determines how the colors progress across the element.

The default direction is to bottom.

For example:

background: repeating-linear-gradient(to right, red 0px, blue 40px);
background: repeating-linear-gradient(to bottom, red 0px, blue 40px);
background: repeating-linear-gradient(45deg, red 0px, blue 40px);

Angles can also use units such as turn, rad, and grad.

For example, 0.25turn is equivalent to 90deg.

The gradient direction is perpendicular to the stripes created by hard color stops.

Color Stops

Color stops define which colors appear and where they are positioned along the gradient line.

For example:

background: repeating-linear-gradient(
  to right,
  red 0px,
  yellow 20px,
  blue 40px
);

The gradient transitions from red to yellow and then to blue over a 40px interval.

The sequence repeats every 40px.

Color stops can use lengths or percentages:

background: repeating-linear-gradient(
  to right,
  red 0%,
  blue 20%
);

Percentage positions are measured relative to the gradient line's length.

For example, a 20% repeating interval corresponds to one-fifth of that length.

When color-stop positions are omitted, the browser distributes them according to the CSS gradient color-stop rules.

Explicit positions provide more predictable repeating intervals.

Repeating Interval

The repeating interval is the distance between the first and last color-stop positions.

For example:

background: repeating-linear-gradient(
  to right,
  red 0px,
  blue 20px
);

The pattern repeats every 20px along the gradient line.

Changing the last stop to 60px creates a wider pattern:

background: repeating-linear-gradient(
  to right,
  red 0px,
  blue 60px
);

The pattern now repeats every 60px.

Smaller intervals create more repetitions within a given area, while larger intervals create fewer.

For example:

background: repeating-linear-gradient(
  90deg,
  #0066cc 0px 10px,
  #ffffff 10px 20px
);

This produces alternating blue and white vertical stripes, with a complete repeating interval of 20px.

If the first and last color stops have the same position, the repeating gradient becomes a solid color based on its final color stop.

Hard Color Stops

Hard color stops create sharp boundaries between colors instead of smooth transitions.

For example:

background: repeating-linear-gradient(
  to right,
  #0066cc 0px 20px,
  #ffffff 20px 40px
);

Blue occupies the first 20px, followed by white for another 20px.

The complete 40px pattern repeats across the background.

Each color can have two positions, specifying where its solid-color region begins and ends.

Another example:

background: repeating-linear-gradient(
  45deg,
  #0066cc 0px 10px,
  #00a896 10px 20px,
  #ffffff 20px 30px
);

This creates three-color diagonal stripes that repeat every 30px along the gradient line.

Hard color stops are useful for patterns that require clearly separated colors.

Color Hints

A color hint adjusts where the midpoint of a transition occurs between two color stops.

For example:

background: repeating-linear-gradient(
  to right,
  red 0px,
  15px,
  blue 60px
);

The standalone 15px value is a color hint.

It places the halfway color blend at 15px instead of the normal midpoint of 30px.

This causes the transition to progress more quickly near the beginning and more slowly toward the end.

Color hints do not create additional color stops or change the repeating interval.

They only influence the distribution of colors between neighboring stops.

Color Interpolation

Color interpolation determines how intermediate colors are calculated between color stops.

The in keyword allows a color space to be specified explicitly.

For example:

background: repeating-linear-gradient(
  to right in oklab,
  red 0px,
  blue 60px
);

This interpolates the colors in the Oklab color space.

Another example:

background: repeating-linear-gradient(
  90deg in oklch longer hue,
  red 0px,
  blue 60px
);

The longer hue setting controls the direction of hue interpolation around the color wheel.

Supported interpolation spaces include srgb, srgb-linear, lab, lch, oklab, and oklch.

The selected color space can significantly affect the appearance of transitions between saturated colors.

Explicit color interpolation syntax may have different browser support from basic repeating linear gradients.

Transparency

Transparent color stops allow an underlying background color or image to show through.

For example:

.box {
  background-color: #f1f3f5;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 102, 204, 0.8) 0px 15px,
    transparent 15px 30px
  );
}

The blue sections appear over the background color, while the transparent sections reveal the background beneath them.

Transparent gradients can also be layered over other gradients:

.box {
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.3) 0px 10px,
      transparent 10px 20px
    ),
    linear-gradient(135deg, #0066cc, #00a896);
}

The repeating gradient forms the top layer, while the regular linear gradient provides the underlying colors.

Using transparency makes it possible to combine repeating patterns with more complex backgrounds.

Multiple Backgrounds

Multiple repeating gradients can be combined to create layered patterns.

For example:

.box {
  background-color: #ffffff;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 102, 204, 0.2) 0px 1px,
      transparent 1px 20px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 102, 204, 0.2) 0px 1px,
      transparent 1px 20px
    );
}

The first gradient creates horizontal lines, while the second creates vertical lines.

Together, they form a grid-like background pattern.

Background images are layered in the order listed, with the first image painted on top.

Additional layers can be added for more complex decorative effects.

linear-gradient() vs. repeating-linear-gradient()

Both functions create color transitions along a straight line, but only repeating-linear-gradient() automatically repeats the defined pattern.

For example, a regular linear gradient:

background: linear-gradient(
  to right,
  red 0px,
  blue 50px
);

After the final color stop, the background remains blue.

By comparison:

background: repeating-linear-gradient(
  to right,
  red 0px,
  blue 50px
);

The red-to-blue transition repeats every 50px across the background.

Use linear-gradient() for a single color progression and repeating-linear-gradient() for repeated transitions or stripes.

Example

This example creates a repeating horizontal color transition from blue to teal and back to blue.

HTML:

<div class="repeating-linear-demo"></div>

CSS:

.repeating-linear-demo {
  width: 100%;
  height: 180px;
  background-color: #0066cc;
  background-image: repeating-linear-gradient(
    to right,
    #0066cc 0px,
    #00a896 40px,
    #0066cc 80px
  );
}

The gradient transitions from blue to teal over the first 40px and returns to blue over the next 40px.

The complete 80px pattern repeats horizontally across the element.

Because the first and last colors match, the repeated pattern has a continuous transition at each boundary.

Striped Background Example

This example creates diagonal stripes using hard color stops.

HTML:

<div class="repeating-linear-stripes-demo"></div>

CSS:

.repeating-linear-stripes-demo {
  width: 100%;
  height: 180px;
  background-color: #0066cc;
  background-image: repeating-linear-gradient(
    45deg,
    #0066cc 0px 15px,
    #ffffff 15px 30px
  );
}

The blue and white stripes each occupy 15px along the gradient line.

The complete pattern repeats every 30px.

The 45deg angle makes the stripes appear diagonally across the element.

Changing the angle rotates the direction of the pattern, while changing the color-stop positions adjusts the stripe widths.

Common Uses

The repeating-linear-gradient() function is useful for creating repeating patterns without external image files.

For example:

.horizontal-stripes {
  background: repeating-linear-gradient(
    to bottom,
    #0066cc 0px 10px,
    #ffffff 10px 20px
  );
}
.vertical-stripes {
  background: repeating-linear-gradient(
    to right,
    #0066cc 0px 10px,
    #ffffff 10px 20px
  );
}
.diagonal-stripes {
  background: repeating-linear-gradient(
    45deg,
    #0066cc 0px 10px,
    #ffffff 10px 20px
  );
}

These examples use the same color pattern with different directions.

Limitations

The repeating-linear-gradient() function has several important rules and limitations.

• At least two color stops are required.
• Color-stop positions must use valid lengths or percentages.
• The repeating interval is determined by the first and last color-stop positions.
• It returns an image value, not a standalone CSS color value.
• Very small repeating intervals can create dense patterns or visible rendering artifacts.
• Hard color boundaries can vary slightly in appearance because of antialiasing.
• Percentage-based intervals depend on the length of the gradient line.
• The function does not automatically animate a pattern.
• Explicit color interpolation syntax may have different browser support from basic gradients.
• Fallback background colors are recommended for older browsers.

For example, this is valid:

background: repeating-linear-gradient(
  to right,
  red 0px,
  blue 40px
);

The following is invalid because only one color stop is supplied:

background: repeating-linear-gradient(red);

The following is invalid because to must be followed by a valid direction:

background: repeating-linear-gradient(
  to,
  red 0px,
  blue 40px
);

Use explicit color-stop positions when a consistent repeating interval is required.

Browser Support

The CSS repeating-linear-gradient() function is Baseline Widely available and is supported by modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

It does not require vendor prefixes in modern browsers.

For example:

.box {
  background-color: #0066cc;
  background-image: repeating-linear-gradient(
    45deg,
    #0066cc 0px 15px,
    #ffffff 15px 30px
  );
}

Browsers supporting the function display the repeating pattern. Unsupported browsers retain the solid background color.

Feature detection can also be used:

@supports (background-image: repeating-linear-gradient(red 0px, blue 40px)) {
  .box {
    background-image: repeating-linear-gradient(
      red 0px,
      blue 40px
    );
  }
}

For current compatibility information, visit Can I Use? and search for CSS repeating gradients.

Specifications

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

Additional color interpolation syntax is defined in the CSS Images Module Level 4 .

Related CSS functions include linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient(), and color-mix().