Grain Gradient Backdrop

ProNew

A smooth gradient that flows slowly across the page with a fine film grain over it that re-rolls many times a second.

The full demo as documented.

Customize

Controls declared by this item. Changes drive the preview live.

speed1


pnpm dlx shadcn@latest add @tealmac-pro/backdrop-grain-gradient

Prop	Type	Default	Description
`colors`	`string[]`	`chart-4, chart-1, chart-2`	CSS colors drawn from in order. Any CSS color or `var()`.
`speed`	`number`	`1`	Playback speed multiplier.

Also accepts all <div> props except children.

Decorative: the wrapper is aria-hidden and pointer-events-none, so it never takes focus or blocks clicks.
Under prefers-reduced-motion: reduce it draws one still frame and does not animate.

Grain is a per-pixel hash that changes at about 14 frames a second, so it shimmers like film instead of crawling.
Fills its nearest positioned parent (absolute inset-0). Put page content above it with relative isolate on the parent and -z-10 on the backdrop.
Draws with the 2D canvas only (no WebGL, no extra packages), caps the pixel ratio, and stops its loop while off-screen or in a hidden tab.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/backdrop-grain-gradient

Prop	Type	Default	Description
`colors`	`string[]`	`chart-4, chart-1, chart-2`	CSS colors drawn from in order. Any CSS color or `var()`.
`speed`	`number`	`1`	Playback speed multiplier.

Also accepts all <div> props except children.

Decorative: the wrapper is aria-hidden and pointer-events-none, so it never takes focus or blocks clicks.
Under prefers-reduced-motion: reduce it draws one still frame and does not animate.

Grain is a per-pixel hash that changes at about 14 frames a second, so it shimmers like film instead of crawling.
Fills its nearest positioned parent (absolute inset-0). Put page content above it with relative isolate on the parent and -z-10 on the backdrop.
Draws with the 2D canvas only (no WebGL, no extra packages), caps the pixel ratio, and stops its loop while off-screen or in a hidden tab.