How to Generate a Custom CSS Dot Grid Background

You’re building a hero section or a card background and you want that subtle dot-grid texture — the kind of thing you’d see in a design tool’s canvas, or a bullet journal page — instead of a flat color. It sounds like a five-minute CSS job, but getting the spacing, dot size, and color right by hand-tweaking a radial-gradient background-image usually takes longer than five minutes, and the math for even spacing isn’t obvious if you haven’t done it before.

The other option is grabbing a dot-pattern PNG off a stock site, but then you’re stuck with whatever spacing and color someone else chose, and it doesn’t scale cleanly if your layout changes.

What a CSS dot grid actually involves

Under the hood, a dot grid background is usually a small repeating radial-gradient pattern set as a background-image, tiled with background-size to control spacing. Three things determine how it looks: the size of each dot, the gap between dots, and the color of the dots against the base background. Get the ratio of dot size to spacing wrong and it either looks like static noise (too dense) or barely registers (too sparse).

For most use cases — a card background, a section divider, a placeholder texture — you don’t need anything more complex than that. You need clean, adjustable values you can drop into a stylesheet.

Why people get stuck here

• The gradient math isn’t intuitive. Writing a radial-gradient(circle, color size, transparent size) combined with the right background-size for even spacing takes some trial and error the first time.
• Retina and high-DPI screens. A dot pattern that looks crisp at 1x can look fuzzy or misaligned at 2x pixel density if you’re exporting a raster image instead of using CSS.
• Matching an existing design system’s spacing. If your grid needs to line up with an 8px or 4px spacing scale, eyeballing dot gaps in a stock image almost never matches.
• Wanting both CSS and an image. Sometimes you need the CSS for a live site, and sometimes you need a static PNG tile for a design mockup or a place CSS backgrounds aren’t practical (like an email template).

What a good dot grid generator looks like

Independent control over spacing, size, and color

You should be able to adjust dot spacing and dot size separately, not as one linked slider, since the right ratio changes depending on whether you want a subtle texture or a bold pattern.

Instant visual preview

Because the right settings depend on how the pattern actually looks against your background color, a live preview beats guessing values and refreshing a browser tab to check.

Both CSS output and a downloadable tile

The most flexible tools give you copy-paste CSS for live web use and a downloadable PNG for anywhere CSS backgrounds don’t apply — a Figma mockup, a printed material, or an email template.

Common mistakes to avoid

• Making dots too large relative to their spacing, which reads as a checkerboard or noise pattern instead of a clean grid.
• Using a dot color with too little contrast against the background, making the whole effort invisible on most screens.
• Forgetting to test the pattern against both light and dark sections of a page if your design uses both.
• Hardcoding pixel values that don’t scale — a dot grid that looks right at 1200px wide can look cramped or oddly spaced on a much wider or narrower viewport.
• Exporting a raster PNG for something that will be resized responsively, which causes blurring; CSS gradients scale cleanly, images don’t.

How to do it with Dot Grid Generator

Online Tool Store’s Dot Grid Generator runs entirely in your browser and gives you both output formats.

1. Open the Dot Grid Generator and set your base background color.
2. Adjust dot spacing, dot size, and dot color until the preview looks right.
3. Copy the generated CSS directly into your stylesheet, or download the PNG tile if you need a static image.
4. Reuse the same values elsewhere in your project to keep the pattern consistent across sections.

Since the pattern is generated client-side, you can iterate on spacing and color as many times as you want without any upload step slowing you down.

Frequently asked questions

Is a CSS dot grid better than a downloaded PNG pattern?

For live websites, yes in most cases — CSS gradients are resolution-independent, so they stay crisp on any screen density and scale cleanly with responsive layouts, while a raster PNG can blur or tile awkwardly. A PNG is still the right choice for contexts where CSS backgrounds aren’t supported, like some email clients or print materials.

What dot spacing should I use?

It depends on the effect you want — a tight spacing (around 12-16px) reads as a fine texture, while wider spacing (24px or more) reads as a more deliberate, spaced-out grid pattern. Match it to your existing spacing scale if your design system uses one, so the dots feel intentional rather than arbitrary.

Can I use a dot grid as a full-page background?

Yes, and it’s a common use case — a subtle, low-contrast dot grid works well as a full-page or full-section background because it adds texture without competing with foreground content. Keep the dot color close in value to the base background if you want it to stay in the background visually.

Final thought

A dot grid is a small detail, but it’s one of those things that reads as either polished or slightly off depending on whether the spacing and contrast are dialed in. Generate it with real controls instead of eyeballing a gradient string, and it’ll match your layout instead of just approximating it.

Try the free Dot Grid Generator