CSS Background Pattern Generator

Generate pure-CSS background patterns: dots, grid, stripes, lines and checkerboard. Set colours and size, then copy the CSS.

Frequently asked questions

Are these patterns really pure CSS?

Yes. Every pattern is made from CSS gradients (linear, radial or conic) with a background-size, so there are no image files to load. That keeps your page light and the pattern sharp at any zoom level.

How do I make the pattern bigger or smaller?

Use the size field. It sets the tile size in pixels, so larger values spread dots, grid lines or checks further apart. Stripe and line patterns use it for their spacing too.

Can I use a transparent background?

The preview uses two solid colours, but in your own CSS you can drop the background-color line to let the pattern sit over whatever is behind it, since the gaps use transparent.