~/css/background-pattern-generator
CSS Background Pattern Generator
Create seamless background patterns with nothing but CSS gradients: polka dots, graph-paper grids, diagonal stripes, checkerboards, zigzags and crosses. Adjust the tile size, colours and line thickness, then copy the background rules.
Using the CSS Background Pattern Generator
Patterns from gradients
CSS gradients can draw hard-edged shapes as well as soft blends. A radial gradient with a sharp stop makes a dot; two linear gradients at right angles make a grid. Set background-size to the tile size and the browser repeats the tile across the element, with no image file to download.
Why CSS patterns
They weigh a few bytes, stay sharp on every screen density, scale to any size and can be recoloured with a single variable. Compared with a PNG tile, there is nothing to load and nothing to blur.
Keep patterns subtle
A background pattern sits behind content, so it should whisper. Low opacity and a colour close to the background keep text readable. The opacity control exists for exactly that reason.
Combining patterns
Backgrounds accept several layers separated by commas. Put a soft radial glow over a dot grid, or stack two stripe directions for a woven look; each layer can have its own size and position.
Patterns and dark mode
A pattern tuned for a dark background often looks too strong on a light one. Store the pattern colour and opacity in custom properties and change them inside a prefers-color-scheme media query, so the same background rule adapts to both themes.
Frequently asked questions
Do CSS patterns hurt performance?
Not for static backgrounds. Very large elements with complex multi-layer patterns can cost a little when scrolling, but typical sections are fine.
Can I use a pattern behind text?
Yes, at low opacity. Check the contrast of your text against the strongest part of the pattern.
Will it look the same in every browser?
Yes. Gradients and background-size are supported everywhere; tiny anti-aliasing differences are normal.