CSS Dot Pattern Generator
Create dot and polka-dot background patterns with intuitive controls.
Adjust size, gap, offset layout, and colors, then generate ready-to-use CSS.
This tool has been used … times.
background-color: #f8fafc;
How to Use the CSS Code
Just paste the copied code into the CSS of the element you want to style.
.my-card { /* paste the generated code */ background-color: #f8fafc; background-image: radial-gradient(circle, #1d4ed8 0 48%, transparent 52%); /* other styles */ border-radius: 24px; color: #0f172a; }
The generated code already includes the background color, so it works as a complete, paste-and-go snippet.
How the Dot Background Works
Each dot is drawn with a radial gradient like
radial-gradient(circle, color 0 48%, transparent 52%).
That single dot is then divided into a “dot + gap” tile with
background-size
and repeated to fill the whole area.
- background-size … the size of one tile. It equals Dot Size plus Gap; change it to adjust the density.
- background-position … the pattern’s origin. Grid uses one layer, while Offset adds a second layer shifted by half a tile for a staggered look.
- Softness … how much the dot edge is blurred. Moving the gradient stop inward tunes the look from crisp to soft.
Choosing Square draws square dots with a conic-gradient instead of a radial one. The idea is the same: tile one cell and repeat it.
Tips for Clean Dot Backgrounds
Plenty of spacing keeps the pattern subtle as a background and keeps text easy to read.
A staggered layout keeps the regularity but avoids a stripe-like feel, giving a gentler impression.
Blurring the dot edges slightly takes you from pop polka dots to a refined texture.