Anatomy of Geometric Background

GeometricBackground draws lattices with paint, not SVG <line>s. Two linear-gradients (horizontal + vertical strokes) sized to the cell give you a ruled page; the default also parks a radial wash so the lattice is not flat. Presets add dashes, circuits, and masks — still one div.

Dual-axis recipe

A 1px stroke on a transparent stop, repeated on both axes:

backgroundImage: `
  linear-gradient(to right, #f0f0f0 1px, transparent 1px),
  linear-gradient(to bottom, #f0f0f0 1px, transparent 1px),
  radial-gradient(circle 800px at 100% 200px, #d5c5ff, transparent)
`,
backgroundSize: "96px 64px, 96px 64px, 100% 100%",
backgroundColor: "#ffffff",

The first two layers share a 96×64 cell. The third is a full-bleed radial parked off the right edge so the grid softens into a glow.

Change backgroundSize and you change density — no geometry to rebuild.

Grid + glow composite

Because layers are listed in one backgroundImage, order is paint order (first = topmost in CSS). The radial sits after the lines in the string so it reads under the strokes while still tinting empty cells.

Same ownership probe as Gradient / Decorative / Effect:

const ownsBackground =
  style != null && BACKGROUND_KEYS.some((key) => key in style);

Masked fades

Some presets fade the pattern with mask-image so the lattice dissolves into the page instead of hitting a hard crop:

maskImage: "linear-gradient(to bottom, black 30%, transparent 95%)"
// + WebkitMaskImage for Safari

That is still compositor-friendly — no layout thrash, no SVG path work. Dashed and circuit presets are the same idea with different gradient recipes in geometricBackgroundPresets.

Stacking

aria-hidden="true"
className={`absolute inset-0 z-base ${className ?? ""}`}

First child of relative. Content at z-raised.

The result

Two axes, optional glow, optional mask — a ruled page that never leaves CSS.