CSS Pattern Generator
Generate a repeating background pattern (stripes, dots, checkerboard or grid) as pure CSS.
background-color: #ffffff;
background-image: repeating-linear-gradient(45deg, #6366f1 0, #6366f1 10px, transparent 10px, transparent 20px);Related tools
How it works
- 1
Pick a pattern type
Stripes, dots, checkerboard or grid.
- 2
Set colors and size
See the live preview update instantly.
- 3
Copy the CSS
No image asset needed - pure background-image CSS.
FAQ
- Does this need any image file?
- No - every pattern is built from CSS gradients only, no image asset to host or load.
- Does this tool send my input anywhere?
- No - the CSS is generated entirely in your browser.