← Visual Library / Backgrounds

Dot grid background

A regular grid of tiny dots in the background. Suggests precision and structure. Common on developer-tool and SaaS sites.

Backgrounds Built

Use when — tech / developer / SaaS aesthetics. Pairs well with monospaced fonts and minimalist layouts. Skip on luxury or editorial brands — feels too engineered.

Live demo

Content sits cleanly on the grid →

CSS

.section {
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px);
  background-size: 18px 18px;
}

Variants

Square grid (lines): swap the radial-gradient for two linear gradients (one horizontal, one vertical):

background-image:
  linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px);
background-size: 32px 32px;

Dot fade-out at edges: mask the dots with a radial gradient that's transparent at center, opaque at edges. Dots are visible in the corners, fade out toward focus areas.

Dials

Dot size: 1–2px is the sweet spot. Bigger reads as polka dots.

Spacing: 16–24px. Tighter feels claustrophobic; wider loses pattern.

Opacity: 0.10–0.20 on white. 0.05–0.10 on dark.

Source: Jono Catliff masterclass, 2026-05-19. See masterclass notes.