CSS pattern generator — stripes, dots, grids and checks from gradients

How to use the CSS pattern generator

1. Pick a Pattern: Diagonal, Vertical or Horizontal stripes, Checkerboard, Polka dots, Offset dots, Grid lines, Cross-hatch, Zigzag, Triangles or Diamonds.
2. Choose the Pattern colour and the Background.
3. Set the Tile size from 4 to 120 px.
4. Copy the .pattern rule and use it on any element.

What it does and when to use it

Repeating patterns add texture to hero sections, empty states, cards and placeholder images without loading any image file. Graph-paper grid lines suit design tools and dashboards, soft polka dots work for playful brands, and fine diagonal stripes are a common way to mark disabled or “under construction” areas.

For a single smooth blend instead of a repeat, use the CSS gradient generator. If you need the pattern as a file, the SVG pattern generator makes one, and to fade a pattern out towards an edge, add a mask from the mask fade generator.

How it works

Every pattern is one or more CSS gradients:

• Stripes use repeating-linear-gradient at 45°, 90° or 0°, with hard colour stops.
• Checkerboard uses repeating-conic-gradient, which sweeps the two colours around each corner point.
• Dots use radial-gradient circles: a radius of 15% of the tile for polka dots and 12% for offset dots, with a 1px soft edge. Offset dots add a second layer shifted by half a tile.
• Grid lines are two 1px linear gradients, one horizontal and one vertical.
• Cross-hatch crosses two sets of 1px diagonal lines; zigzag, triangles and diamonds combine angled linear gradients with hard 25% or 50% stops.

MDN lists repeating-linear-gradient() as Baseline widely available since July 2015 and repeating-conic-gradient() since November 2020.

Worked examples

Default diagonal stripes, indigo on pale indigo, 24 px tile: background: repeating-linear-gradient(45deg, #6366f1 0 6px, #eef2ff 6px 12px);

Pink polka dots, #f43f5e on #fff1f2, 20 px tile:

.pattern {
  background-color: #fff1f2;
  background-image: radial-gradient(#f43f5e 3px, transparent 4px);
  background-size: 20px 20px;
}

A classic checkerboard, black and white, 20 px tile: repeating-conic-gradient(#000000 0 25%, #ffffff 0 50%) 0 0 / 20px 20px. Each square is 10 px, because one tile holds two squares across.

Limits and tips

• Two colours only. For more, layer extra gradients by hand.
• Small, high-contrast tiles can shimmer on screen and may be uncomfortable for some people. Larger tiles or closer colours are calmer.