Loading page
About this tool
Generate dot, line, isometric and graph-paper grid backgrounds with ink coverage figures, CSS and SVG export.
Dot Grid Background Generator builds dot, isometric, square line, graph-paper and cross-mark grids and reports exactly how much of the surface the ink covers. Coverage has a closed form for each lattice — π r² ÷ cell² for a dot grid, 1 − ((cell − width) ÷ cell)² for a two-family line grid — so you can see before you ship whether a background will interfere with body text. Output comes as CSS gradients using color-mix, or as a repeating SVG tile with fill-opacity that opens correctly in vector editors.
Open Dot Grid Background Generator on AltFTool — it loads instantly in your browser.
Provide your input — an image, text, or data.
Let the tool analyze or generate the result.
Review, refine, and reuse the output wherever you need it.
Ink coverage and average alpha come from the lattice geometry, not from eyeballing a screenshot.
CSS gradients need no network request; the SVG tile drops straight into a design file.
The tool flags a cell size that is not a multiple of 8 px, which is where grid drift usually starts.
Pick a multiple of your spacing scale — 8, 16, 24 or 32 px if you are on an 8 point system — so the grid lines up with the rest of the layout. 24 px with a 1 px radius dot is a common, unobtrusive default.
Use a radial-gradient with a hard stop and set background-size to the cell: background-image: radial-gradient(circle at center, <colour> 1px, transparent 1.5px); background-size: 24px 24px. Two offset gradients with different background-position give you an isometric lattice.
It can. WCAG contrast is measured against the colour a pixel actually renders, so ink sitting behind text lowers the effective ratio. Keep the average alpha of the pattern under roughly 2% behind body copy, and check the darkest point of the pattern rather than the page colour.
CSS if the grid only exists on the web — it costs no extra request and scales with the element. SVG if the grid needs to travel into Figma, Illustrator or a print file, or if you want the exact same tile in several tools.