Dot Grid Texture
also known asdotted background · pegboard texture · canvas dots · grid of dots
A subtle background texture of evenly-spaced dots, used as a quiet structural reference instead of a solid color.
A dot grid is a background pattern of small, low-contrast dots arranged on a regular grid (typically 16–24px spacing). Unlike a solid surface, it gives the eye a sense of underlying structure and depth without competing with the content; unlike a full grid of lines, it stays quiet enough to use behind text and components.
The pattern shows up most often in tool and canvas interfaces — design tools, whiteboards, node editors, notebook apps — because it implies an infinite drawing surface and helps users sense alignment as they place objects. It's also common as a hero-section backdrop on developer-tool marketing pages, where it reads as 'precise, technical, considered'.
A good dot grid sits at very low opacity (4–10% on light surfaces, 6–14% on dark), uses dots no larger than 1.5px, and ideally fades at the edges with a radial mask so it doesn't fight the layout border. CSS `radial-gradient` repeated as a background image is the cheapest implementation.
- Canvas, whiteboard, and node-editor interfaces
- Hero backdrops for developer-tool and design-tool marketing
- Empty states inside drawing or layout surfaces
- Anywhere you'd reach for a subtle texture but want structure, not noise
- Behind long-form body copy — dots distract the reading eye
- On already-textured surfaces (grain, mesh) — too busy
- Mobile screens at low DPR where dots can moiré
- +Keep dots small (1–1.5px) and low contrast (4–14% opacity)
- +Use 16–24px spacing — tighter feels like static, looser loses structure
- +Fade the grid at viewport edges with a radial mask
- +Match the dot color to the foreground, not a separate gray
- −Don't use dots above 2px — they start to look like polka dots
- −Don't combine with a line grid — pick one structural reference
- −Don't animate the grid unless you want a parallax canvas effect
Add a dot grid background texture to a React + Tailwind page. Implementation: create a `<div>` that fills its parent with `position: absolute; inset: 0; pointer-events: none;`. Apply: ```css background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 22px 22px; color: hsl(var(--foreground)); opacity: 0.08; /* 0.12 on dark surfaces */ mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 100%); -webkit-mask-image: same; ``` Use it: place it as the first child inside a `relative` hero/section wrapper, behind the content (z-index 0, content z-index 10). Do: keep dots ≤1.5px, spacing 16–24px, opacity ≤0.14, fade edges with the radial mask, color-match to foreground via `currentColor`. Don't: combine with a line grid, animate it, or stack on a gradient/mesh background. Acceptance: at default viewport the dots are barely visible — they read as structure, not pattern. Zooming in confirms a clean technical grid.
Paste into Claude Code, Cursor, or Lovable to apply dot grid texture to your project.
People also ask
How do I make a dot grid in CSS?
Use a repeated radial-gradient: `background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 20px 20px; opacity: 0.08;` — then tint via `color` and fade at edges with a mask-image radial gradient.
What spacing should dots use?
16–24px is the reliable range. 16px reads as a fine technical grid, 24px feels more spacious and editorial. Below 12px the texture turns into static; above 32px the grid disappears.