CSS Repeating Gradients

CSS Repeating Gradients

CSS repeating gradients repeat a defined gradient pattern to fill the available area.

CSS provides repeating versions of linear, radial, and conic gradients. By controlling the colors and color stop positions, you can create stripes, rings, wedges, grids, and other repeating patterns without using separate image files.

How Repeating Gradients Work

A regular gradient creates one gradient across its gradient line or shape. A repeating gradient repeats the defined color-stop pattern as many times as necessary to fill the gradient.

CSS provides three repeating gradient functions:

The distance or angle between the first and last color stops defines the basic pattern that is repeated.

Repeating Linear Gradients

The repeating-linear-gradient() function repeats color stops along a straight gradient line.

.box {
  background-image: repeating-linear-gradient(
    45deg,
    steelblue 0 20px,
    lightblue 20px 40px
  );
}

This example creates diagonal stripes. The first color occupies the first 20 pixels and the second occupies the next 20 pixels. The complete 40-pixel pattern then repeats.

Changing the angle changes the direction of the stripes, while changing the stop positions changes their width.

Repeating Radial Gradients

The repeating-radial-gradient() function repeats color stops outward from the gradient's center.

.box {
  background-image: repeating-radial-gradient(
    circle,
    steelblue 0 20px,
    lightblue 20px 40px
  );
}

The result is a series of repeating circular bands. In this example, each complete pattern occupies 40 pixels of radial distance before beginning again.

The center can also be moved with at, and the shape can be changed when appropriate for the design.

Repeating Conic Gradients

The repeating-conic-gradient() function repeats color stops around a center point.

.box {
  background-image: repeating-conic-gradient(
    steelblue 0deg 30deg,
    lightblue 30deg 60deg
  );
}

This example defines a 60-degree pattern containing two 30-degree sections. That pattern repeats around the full rotation.

Repeating conic gradients are useful for creating angular patterns such as wedges and rays.

Hard Color Stops

Hard color stops are particularly useful with repeating gradients because they create clean boundaries between each part of the repeated pattern.

.box {
  background-image: repeating-linear-gradient(
    90deg,
    steelblue 0 25px,
    lightblue 25px 50px
  );
}

The first color ends exactly where the second begins, so there is no area available for the browser to create a smooth transition. The result is a repeating pattern of solid stripes.

If the stops are separated instead, the browser creates a gradual transition between them.

.box {
  background-image: repeating-linear-gradient(
    90deg,
    steelblue 0,
    lightblue 50px
  );
}

This distinction is important: repeating gradients do not automatically create hard stripes. The color stop positions determine whether the repeated pattern contains smooth transitions or sharp boundaries.

Controlling Pattern Size

The final color stop determines where one repetition ends and the next begins.

.small-pattern {
  background-image: repeating-linear-gradient(
    45deg,
    steelblue 0 10px,
    lightblue 10px 20px
  );
}
.large-pattern {
  background-image: repeating-linear-gradient(
    45deg,
    steelblue 0 30px,
    lightblue 30px 60px
  );
}

The first example repeats every 20 pixels, while the second repeats every 60 pixels. Increasing the distance between the beginning and end of the pattern makes each repetition larger.

For conic gradients, angular color-stop positions such as degrees can control the size of each repeating angular pattern.

Transparent Repeating Gradients

Repeating gradients can include colors with alpha transparency, allowing backgrounds underneath the pattern to remain visible.

.box {
  background-image: repeating-linear-gradient(
    45deg,
    rgb(0 136 204 / 70%) 0 20px,
    rgb(0 136 204 / 0%) 20px 40px
  );
}

This example alternates between semi-transparent blue and fully transparent stripes. A background beneath the gradient remains visible through both areas, with the transparent stripes revealing it completely.

A checkerboard is useful when demonstrating this effect because it makes the difference between transparency and a solid light color immediately visible.

Layering Repeating Gradients

Multiple repeating gradients can be layered to create more complex patterns.

.box {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgb(0 136 204 / 20%) 0 20px,
      transparent 20px 40px
    ),
    repeating-linear-gradient(
      90deg,
      rgb(0 136 204 / 20%) 0 20px,
      transparent 20px 40px
    );
}

The first gradient creates horizontal bands and the second creates vertical bands. Because the colors include transparency, both layers remain visible where they overlap.

Layering repeating gradients can create grids, checks, stripes, and other decorative patterns entirely with CSS.

Repeating Gradient Example

The following example compares repeating linear, radial, and conic gradients along with a transparent repeating gradient. Open the example in the editor and change the colors, stop positions, distances, or angles to see how the repeated patterns are created.

.linear {
  background-image: repeating-linear-gradient(
    45deg,
    steelblue 0 20px,
    lightblue 20px 40px
  );
}
.radial {
  background-image: repeating-radial-gradient(
    circle,
    steelblue 0 20px,
    lightblue 20px 40px
  );
}
.conic {
  background-image: repeating-conic-gradient(
    steelblue 0deg 30deg,
    lightblue 30deg 60deg
  );
}