CSS patterns with repeating gradients

CSS patterns are repeating backgrounds, such as stripes, grids, dots and checks, drawn entirely with gradient functions. Two ideas make them work. Hard colour stops, where two stops share a position, turn a gradient into a crisp edge. Repetition, either with the repeating-* gradient functions or with background-size tiling, turns one edge into a pattern. The result weighs a few bytes, scales perfectly and takes its colours from your CSS variables.

How hard stops make shapes

A gradient blends between neighbouring stops. If the next stop starts exactly where the last ended, there is no distance to blend over, so the colour switches in a hard line. The shorthand for this is a colour with two positions, such as #1e293b 0 10px, which holds that colour solid from 0 to 10 pixels. The CSS linear gradient guide covers stops, hints and hard stops in detail.

/* a soft blend */
background: linear-gradient(90deg, #1e293b, #334155);

/* a hard edge at 50% */
background: linear-gradient(90deg, #1e293b 50%, #334155 50%);

/* the same stripe pair, repeated every 20px */
background: repeating-linear-gradient(90deg, #1e293b 0 10px, #334155 10px 20px);

Stripes with repeating-linear-gradient

repeating-linear-gradient() repeats its stop list along the gradient line until the element is full. The length of one repeat is the last stop's position, so 0 10px, 10px 20px repeats every 20 pixels. Change the angle for diagonals, and change the ratio of the two bands for pinstripes or bold awning stripes.

Grids, dots and tiles with background-size

Some patterns cannot be drawn by one repeating gradient: a dot grid needs repetition in two directions. The answer is to draw one tile, such as one dot or one corner of a grid, then set background-size to the tile size. Backgrounds repeat by default, so the tile fills the element.

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

.dots {
  background-color: #fefce8;
  background-image: radial-gradient(#ca8a04 1.5px, transparent 2px);
  background-size: 20px 20px;
}

.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 24px 24px;
}

The grid is two gradients: one draws a 1px horizontal line at the top of each tile, the other a vertical line at its left edge. The dots are a small radial gradient that turns transparent after 2 pixels. The checkerboard uses a conic gradient split into quarters, which is why it needs only one layer.

Gingham, plaid and zigzags

Layering semi-transparent stripes makes woven patterns: where a horizontal and a vertical band cross, their colours stack and the square turns darker. That is gingham. Add a second, thinner set of stripes in another colour and it becomes plaid. Zigzags come from four triangular corners, each drawn with a 25% hard stop at a different angle.

.gingham {
  background-color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(220 38 38 / 0.45) 50%, transparent 0),
    linear-gradient(rgb(220 38 38 / 0.45) 50%, transparent 0);
  background-size: 24px 24px;
}

.zigzag {
  background-color: #e0f2fe;
  background-image:
    linear-gradient(135deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(225deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(315deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(45deg, #0ea5e9 25%, transparent 25%);
  background-position: -16px 0, -16px 0, 0 0, 0 0;
  background-size: 32px 32px;
}

Moving stripes for progress bars

Animated diagonal stripes are the classic way to show that something is still working. Draw the stripes as a tile with background-size, then move background-position by exactly one tile width. Because the end frame matches the start frame, the loop has no visible jump. Keep it to small elements, and stop it for people who prefer reduced motion.

.progress {
  background-color: #4f46e5;
  background-image: linear-gradient(45deg, rgb(255 255 255 / 0.18) 25%, transparent 25% 50%, rgb(255 255 255 / 0.18) 50% 75%, transparent 75%);
  background-size: 28px 28px;
  animation: crawl 1s linear infinite;
}

@keyframes crawl {
  to { background-position: 28px 0; }
}

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

Sizing, theming and scaling patterns

Write stop positions and tile sizes in pixels or em, not percentages. Percentages depend on the element's size, so stripes stretch unevenly as the element resizes and edges can land between pixels and blur. Using em makes a pattern scale with the text around it, which suits patterned badges and labels.

Custom properties make patterns reusable. Define the colours and size once, then vary them per component or per theme, for example a lighter pattern in light mode and a quieter one in dark mode.

.stripes {
  --a: #1e293b;
  --b: #334155;
  --w: 10px;
  background: repeating-linear-gradient(45deg, var(--a) 0 var(--w), var(--b) var(--w) calc(var(--w) * 2));
}

.stripes--warm {
  --a: #fff7ed;
  --b: #fed7aa;
  --w: 14px;
}

Patterns behind text

Patterns are a kind of texture, and the same rules apply: subtle enough to feel rather than read. Background texture covers grain, paper and fabric; text on busy backgrounds covers keeping words legible on top.