Noise Texture

noise x grain

CSS noise/grain texture overlay background. From Magic UI.

backgroundnoisetexturemagicui

Noise Texture

Code

bg-noise.tsx

/* An inline feTurbulence tile — no image request, and it scales to any size.
   Keep the opacity low (2–4%); above that it reads as dirt rather than grain. */
export function NoiseTexture({ children, opacity = 0.03 }: { children: React.ReactNode; opacity?: number }) {
  return (
    <div className="relative grid h-40 place-items-center overflow-hidden rounded-xl">
      <div aria-hidden className="absolute inset-0" style={{
        opacity,
        backgroundImage:
          'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 200 200\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.65\' numOctaves=\'3\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23n)\'/%3E%3C/svg%3E")',
      }} />
      <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 Noise Texture component and wire it to my accent.”