Grid Background

SVG-based grid backdrop — dots, lines, dashed, or crosshair — that stays crisp at any browser zoom. Optional radial / linear fade.

Customize

Variant

Fade

Color

Cell size24px

Line width1

Dot size3px

Dash length3px

Dash gap5px

Cross size5px

Fade strength100%

Usage

import { GridBackground } from "@/components/lazy-ui/grid-background";

<GridBackground
  variant="dots"
  fade="edges"
  color="var(--preview-grid)"
  size={24}
  lineWidth={1}
  dotSize={3}
  dashLength={3}
  dashGap={5}
  crossSize={5}
  fadeStrength={1}
/>