Repeating linear gradient in CSS: stripes, rings and patterns

A repeating linear gradient in CSS repeats a short run of colour stops along a line until it fills the element. Write repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px) and you get diagonal pink stripes, each 14 pixels wide, with no image file. The length of one repeat is set by the last stop, here 28px. Use the same idea with repeating-radial-gradient() for rings and repeating-conic-gradient() for rays.

How repeating-linear-gradient() works

The syntax is identical to an ordinary linear gradient. The difference is what happens after the last stop: instead of holding the final colour, the browser starts the pattern again. Two rules do most of the work.

• The last stop position is the tile length. Stops at 0, 14px and 28px repeat every 28 pixels.
• Two colours at the same position make a hard edge. #f472b6 0 14px, #fdf2f8 14px 28px jumps from pink to pale pink at 14px with no blend.
• Each stop can take two positions. #f472b6 0 14px means solid pink from 0 to 14px, which is shorter than writing the colour twice.
• Use lengths, not percentages, for stripes. Percentages are relative to the gradient line, so stripes stretch when the element resizes.

/* Soft repeat: colours blend within each 40px band */
.soft { background-image: repeating-linear-gradient(90deg, #ede9fe 0px, #c4b5fd 20px, #ede9fe 40px); }

/* Hard stripes: two colours share each boundary */
.stripes { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Uneven stripes: wide band, thin band */
.ticket { background-image: repeating-linear-gradient(90deg, #0f766e 0 36px, #f0fdfa 36px 40px); }

Stripe patterns to copy

Ruled paper is a good example of an asymmetric repeat: 22 pixels of paper, one pixel of line. The same pattern with a red margin line on top makes a convincing notebook. More pattern ideas, including grids and dots, are in CSS patterns.

Repeating gradients or background-size

You can also make stripes with an ordinary linear-gradient() and background-size, which tiles a small image of the gradient. Both work. They behave differently at angles.

For anything diagonal, reach for the repeating version first. For checkerboards and grids, where you need two directions at once, background-size with layered gradients is simpler.

.checker {
  background-image: repeating-conic-gradient(#e7e5e4 0 25%, #fafaf9 0 50%);
  background-size: 24px 24px;
}

.grid {
  background-color: #0f172a;
  background-image:
    linear-gradient(#1e293b 1px, transparent 1px),
    linear-gradient(90deg, #1e293b 1px, transparent 1px);
  background-size: 32px 32px;
}

The checkerboard's second colour starts at position 0. A stop can never sit before the previous one, so the browser moves it up to where the last colour ended, which makes a hard edge without repeating the number. It is a handy shorthand in any gradient, repeating or not.

Rings with repeating-radial-gradient()

The radial version repeats outwards from a centre, so stripes become rings. Move the centre with at to make ripples spreading from a corner. As with radial gradients, circle keeps rings round; the default ellipse stretches them to the box.

Rays with repeating-conic-gradient()

Conic gradients sweep round a point, so their stops are angles. Pick a repeat that divides 360 evenly, such as 20, 30 or 45 degrees, or the last ray will be a different width from the rest. Keep the two colours close in value for a background; high contrast rays vibrate on screen and pull attention from everything else. The full syntax is in CSS conic gradients.

How to fix jagged stripe edges

Hard edges at an angle can look stepped, and at some zoom levels browsers render them unevenly, so a few stripes look thicker than others. The fix is to give each edge a tiny transition instead of a perfect jump.

/* Jagged: a perfect hard edge */
.hard { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Smoother: one pixel of blend at each edge */
.smooth {
  background-image: repeating-linear-gradient(
    45deg,
    #f472b6 0 13.5px,
    #fdf2f8 14.5px 27.5px,
    #f472b6 28.5px
  );
}

An animated barber pole progress bar

Moving background-position by exactly one repeat makes stripes travel without a jump. For a 45 degree pattern with a 28px repeat, the distance along the horizontal axis is the repeat divided by the sine of the angle, about 39.6px.

.progress {
  background-image: repeating-linear-gradient(45deg, #6d28d9 0 14px, #8b5cf6 14px 28px);
  /* one horizontal repeat wider than the bar, so it can slide */
  background-size: calc(100% + 39.6px) 100%;
  background-repeat: no-repeat;
  animation: stripes 1s linear infinite;
}

@keyframes stripes {
  from { background-position: 0 0; }
  to { background-position: -39.6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .progress { animation: none; }
}

For larger animated backgrounds, see CSS animated gradients, which covers cheaper techniques. Stripes and rings are great for details, tickets and loading states. For a background people recognise as yours, Gradiently's Marks add material, light and grain that a repeating pattern can't, and render at every size you design in.