CSS Pattern Generator
Build pure-CSS backgrounds online: dots, grids, stripes, checkers with size and color control. Copy-paste output.
CSS pattern generator
Preview
background-color: #ffffff; background-image: radial-gradient(#a1a1aa 4px, transparent 4.5px); background-size: 24px 24px;
How to use
- Pick dots, grid, stripes, or checkers; set tile size and two colors.
- Check preview.
- Copy the gradient-only CSS background.
FAQ
Images?
Zero — gradients only. Crisp at any DPI, bytes in CSS.
Dark mode?
Pick any two colors — patterns adapt to whatever palette you set.