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";

export function Demo() {
  return (
    <div className="relative h-72 w-full overflow-hidden rounded-2xl bg-neutral-950">
      <GridBackground
        variant="dots"
        size={24}
        dotSize={3}
        color="rgba(255,255,255,0.12)"
        fade="edges"
      />
      <div className="relative grid h-full place-items-center text-sm text-white/80">
        Crisp at any zoom level.
      </div>
    </div>
  );
}