Dot Grid

Free

CSS dot pattern background with configurable size, spacing, and edge fade.

Backgrounds · primitive · basic · none · zero dependencies

dot-grid Backgrounds·preview

Background layer

Give the section a floor.

One absolutely-positioned div behind your content. Set the dot color, the spacing, and how the edges fade out.

spacing 22 · dotSize 1 · fade edges

Dot Grid

CSS dot pattern background with configurable size, spacing, and edge fade.

Free component

Free at launch — join the waitlist and unlock it day one.

Join the waitlist

No card required.

Use it for
  • SaaS dashboard empty state background
  • pricing page section texture
  • developer tool landing page backdrop
  • blueprint-style feature section background
Props
Prop Type Default Description
className string Additional classes for the outer container — set width/height and positioning here.
dotColor string "rgba(255,255,255,0.18)" Color of each dot, any valid CSS color value.
dotSize number 1 Radius of each dot in pixels.
spacing number 20 Distance between dots in pixels.
fade "edges" | "none" "edges" Whether to fade the grid out toward the edges with a radial mask.
FAQ
Does Dot Grid work with Next.js App Router?

Yes. It's a "use client" React component and works unchanged in both the App Router and Pages Router.

Are there any dependencies to install?

None. It's a single CSS background-image with no JavaScript logic beyond prop handling.

Is it responsive?

Yes. It's an absolutely positioned layer that fills whatever sized parent you give it; dot spacing stays fixed in pixels so density is consistent across viewports.

Does it respect prefers-reduced-motion?

There's nothing to disable — the component has no animation at all, so it's inherently safe for motion-sensitive users.