Dot Grid
FreeCSS dot pattern background with configurable size, spacing, and edge fade.
Backgrounds · primitive · basic · none · zero dependencies
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
CSS dot pattern background with configurable size, spacing, and edge fade.
- SaaS dashboard empty state background
- pricing page section texture
- developer tool landing page backdrop
- blueprint-style feature section background
| 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. |
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.