Is the dot grid generator free?

Yes. There is no sign-up, no watermark and no limit. Everything runs in your browser, and the colors you pick are not uploaded.

Can I use the patterns commercially?

Yes. The CSS, SVG and PNG files you generate are yours to use on personal and client projects, with no attribution required.

Is the halftone exact in the CSS?

No. CSS cannot make each dot a different size, so the CSS and SVG approximate the halftone with a mask that fades the dots out. The preview and the PNG draw the real thing, with each dot sized by its position.

Why do square and plus dots use an SVG image in the CSS?

CSS has no gradient that draws a crisp square or plus. Circles use a radial-gradient with a hard stop. Squares and plus signs use a tiny inline SVG as the background-image, which stays sharp at any size.

Not in this tool. It makes static CSS, SVG and images. For a grid that reacts to the cursor, ripples on click and scroll effects, see Dot Grid Field.

Free tools / Dot grid

Free dot grid generator

Set the spacing, size and shape of the dots, add a fade or a halftone, then copy the CSS or SVG or download a PNG. Static output, no sign-up.

The preview is the CSS you copy, at 1:1 pixels.

Starter presets

Spacing

22px

Dot size

3px

Shape

Dot color

Background

Dot opacity

55%

Fade mask

Halftone

CSS

background-color: #f6f6f5;
background-image: radial-gradient(circle, rgba(3,3,3,0.55) 1.5px, transparent 2px);
background-size: 22px 22px;

Tailwind (arbitrary values)

bg-[#f6f6f5] bg-[image:radial-gradient(circle,_rgba(3,3,3,0.55)_1.5px,_transparent_2px)] bg-[size:22px_22px]

SVG pattern

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" role="img" aria-label="Dot grid background">
  <defs>
    <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse"><circle cx="11" cy="11" r="1.5" fill="#030303" fill-opacity="0.55"/></pattern>
  </defs>
  <rect width="100%" height="100%" fill="#f6f6f5"/>
  <rect width="100%" height="100%" fill="url(#dots)"/>
</svg>

What is a dot grid background?

A dot grid is a regular lattice of small dots repeated across a surface. You see it behind whiteboards, notebooks, design tools and landing pages: quiet texture that gives the eye a structure without competing with the content. Change the spacing and the dots read as graph paper or a blueprint. Make them bigger and the same grid becomes a bold pattern.

A halftone is the same idea with one change: the dots grow or shrink across the surface, so a row of dots turns into a gradient. It is the look of printed newspapers and screen-printed posters. In this tool, halftone shrinks the dots along a direction or away from the center, and a fade mask lets the whole pattern dissolve into the background.

The CSS the tool outputs draws circles with one radial-gradient() hard stop, repeated by background-size. Squares and plus signs use a small inline SVG as the background-image. The fade is a mask-image.

Use the CSS on your site

Webflow: add an Embed element with a <style> block that targets a class you gave the section, and paste the rule inside. Webflow effects.
Framer: put the rule in Site Settings, Custom Code, in a <style> tag, and give the frame the class. Framer effects.
WordPress: give a Group block an Additional CSS class, then paste the rule into Appearance, Customize, Additional CSS. WordPress effects.
Shopify: paste the rule into base.css (or a section’s {% style %} block) and add the class to your section. Shopify effects.
React: paste the declarations into a CSS file, or use the Tailwind classes on the element. Use the SVG output as an inline <svg> behind your content. React effects.

Want the dots to move? The how-to for an animated dot grid background in Webflow and Framer covers it, or see the full list of web effects. Also free: mesh gradient generator.

Frequently asked questions

Is the dot grid generator free?: Yes. There is no sign-up, no watermark and no limit. Everything runs in your browser, and the colors you pick are not uploaded.
Can I use the patterns commercially?: Yes. The CSS, SVG and PNG files you generate are yours to use on personal and client projects, with no attribution required.
Is the halftone exact in the CSS?: No. CSS cannot make each dot a different size, so the CSS and SVG approximate the halftone with a mask that fades the dots out. The preview and the PNG draw the real thing, with each dot sized by its position.
Why do square and plus dots use an SVG image in the CSS?: CSS has no gradient that draws a crisp square or plus. Circles use a radial-gradient with a hard stop. Squares and plus signs use a tiny inline SVG as the background-image, which stays sharp at any size.
Can the dots move?: Not in this tool. It makes static CSS, SVG and images. For a grid that reacts to the cursor, ripples on click and scroll effects, see Dot Grid Field. See Dot Grid Field.