Create seamless CSS background patterns in seconds. Choose a pattern, pick two colours and a size, preview it live, then copy the CSS for your project.
How to Use
- Choose a pattern: dots, diagonal stripes, grid or checkerboard.
- Pick the pattern colour and the background colour.
- Drag the size slider to make the pattern larger or smaller.
- Preview it live, then click Copy CSS and paste it into your stylesheet.
Key Features
- Four seamless patterns — dots, stripes, grid and checkerboard.
- Live preview — see the pattern update as you adjust it.
- Copy-ready CSS — clean code using pure CSS gradients.
- Adjustable size — scale the pattern from 8 to 64 pixels.
- 100% private — runs entirely in your browser; nothing is sent or stored.
FAQs
Are these real images?
No. Every pattern is pure CSS built from gradients, so it stays sharp at any size and needs no image files.
Will the pattern tile seamlessly?
Yes. Each pattern is designed to repeat without visible seams when used as a background.
How do I use the CSS?
Click Copy CSS, then paste the rules into any selector in your stylesheet, for example a section or card class.
Can I change the colours later?
Yes — just edit the hex codes in the copied CSS. The structure stays the same.
Related Tools
Try these related tools: CSS Gradient Generator, CSS Box Shadow Generator and Color Palette Generator.