Noise Texture

Installation

npx shadcn@latest add @blank/noise-texture

Usage

import { NoiseTexture } from "@/components/ui/noise-texture"

<div className="relative overflow-hidden bg-card">
  <NoiseTexture />
</div>

Grain breaks up the banding a soft gradient shows on large screens. It is a single feTurbulence filter with no image to load and nothing to animate, so it has no motion settings. The overlay is stronger in dark mode, where grain on dark fills is harder to see.

Props