Dot Grid Generator
Adjust the dot grid density and appearance, preview it locally, and copy a ready-to-use CSS background.
Values are limited to 2–40 columns and rows, 1–8px dots, and 4–64px spacing.
A QUICK WALKTHROUGH
How to use this tool
- Choose the number of columns and rows, dot size, and spacing within the bounded controls.
- Set the dot and background colors and review the live preview.
- Copy the generated CSS into a stylesheet or component.
CSS-only dot grids
The pattern is generated locally with radial-gradient backgrounds. It scales with the element and does not create a large DOM grid or image file.
Bounded controls
Density is limited to 2–40 columns and rows, dots to 1–8px, and spacing to 4–64px so the preview and generated CSS stay practical.
Local and copyable
Colors, preview, and CSS output remain in your browser. The result is a background declaration you can paste into any element.
GOOD TO KNOW
Common questions
Does this create an image?
No. It creates a CSS background using radial-gradient, so the pattern remains lightweight and scalable.
How do columns and rows affect the pattern?
They determine the repeat distance from the chosen spacing and dot size, allowing you to describe the intended density in the controls.
Are my colors uploaded?
No. Preview and CSS generation happen locally in your browser.