Create repeating CSS background patterns — dots, grids, diagonals, checkers, waves, hexagons, and more. Tune colors, scale, and opacity; copy ready CSS. No data leaves your browser.
More free utilities you might find useful
Quick answers to common questions
Most patterns use CSS gradients (linear, radial, or repeating) composed into a single background declaration — no images required.
Yes. Enable “Apply to sample UI” to see the pattern behind a sample card.
Dots, grid, diagonal, checkerboard, cross-hatch, zigzag, circles, triangles, waves, and hexagons.
No. Pattern CSS is built entirely in your browser.
Your data is processed entirely in your browser. Nothing is sent to any server.
Pattern type
CSS
background-color: #f8fafc; background-image: radial-gradient(#16a34a73 4px, transparent 4px); background-size: 24px 24px;