Log in Sign up free

CSS Background Pattern Generator

Make pure-CSS background patterns — stripes, dots, grid, checkerboard, zigzag, diagonal lines and more.

Runs instantly in your browser — results update as you type.

How do I make a background pattern with CSS?

CSS patterns are built from repeating gradients — for example repeating-linear-gradient for stripes or radial-gradient with background-size for polka dots. Choose a pattern, colours and size, and copy the few lines of CSS.

Why CSS patterns?

  • No HTTP request and only a few bytes.
  • Sharp on every screen density.
  • Easy to theme with CSS variables, including dark mode.

Frequently asked questions

Do they work in all browsers?

Yes, all modern browsers support these gradients (conic-gradient since 2020).

Can I make the pattern subtle?

Use a pattern colour close to the background, or add transparency.

Is it free?

Yes.