SVG polka dot pattern generator
Create a repeatable SVG polka dot pattern with customizable spacing, radius and colors, ready to download or copy straight into a CSS background. Generated 100% locally in your browser.
How it works
A repeatable polka dot pattern is built here as a small square SVG tile containing a single centered dot: when this tile is repeated across the full width and height of a background, the pattern repeats with no visible seams. Adjust the spacing to bring the dots closer together or move them apart, and the radius to make them larger or smaller.
How do I use this pattern as a background on my website?
Click "Copy as CSS" to get a background-image property encoded as a data URI with repeat enabled, ready to paste straight into your stylesheet, with no need to host a separate image file.
Can the downloaded SVG be resized without losing quality?
Yes. Because SVG is a vector format, the pattern tile stays perfectly sharp at any size it is displayed or printed, unlike a raster image (PNG or JPEG), which would turn blurry when enlarged significantly.
The SVG is generated and assembled entirely in your browser, with no calls to any external server.