Dot Grid Background Generator
Generate a regular dot grid background with customizable spacing, size, and colors, exportable as PNG or as SVG you can copy directly into your code.
How it works
The tool places a dot at every intersection of a regular grid whose spacing and dot size are adjustable, on a solid or transparent background. The result is available both as a ready-to-use PNG image and as scalable vector SVG code that stays sharp at any size and is easy to embed in a web page.
PNG or SVG: which should you choose for a website background?
SVG is generally the better choice for a web background: its file size stays low and it remains crisp at any screen resolution, including high-DPI displays. PNG is a better fit when you need a classic bitmap image for a design tool or a presentation that doesn't support SVG.
How do I use the background as a repeating tile on a website?
Download the generated PNG or SVG, then use it as a CSS background-image with background-repeat: repeat: since the grid is perfectly regular and has no extra margin, the pattern repeats seamlessly from one tile to the next.
100% local generation: the dot pattern is computed entirely in your browser, with no data sent to any server.