Grid Background

grid x pattern

CSS grid pattern background with optional animation. From Magic UI.

backgroundgridpatternmagicui

Grid Background

Subtle dot-grid pattern

Code

bg-grid.tsx

/* Two 1px linear-gradients crossed at 90° — cheaper than an SVG tile and it
   inherits your --border token, so it re-themes in dark mode for free. */
export function GridBackground({ children, size = 32 }: { children: React.ReactNode; size?: number }) {
  return (
    <div className="relative grid place-items-center">
      <div className="absolute inset-0 opacity-35" style={{
        backgroundImage: "linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px)",
        backgroundSize: `${size}px ${size}px`,
      }} />
      <div className="relative">{children}</div>
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Grid Background component and wire it to my accent.”