Six-layer progressive backdrop blur. Stronger at the edge, fading to none toward the content. Use on sticky headers, footers, and side overlays.
In the preview: scroll inside the gallery — content slides under the blurred sticky header.
npx shadcn@latest add @visualsandbox-ui/progressive-blurRequires the one-time registry entry from Installation — or use the full URL with zero setup:
npx shadcn@latest add https://ui.visualsandbox.com/r/progressive-blur.jsonimport { ProgressiveBlur } from "@/components/visualsandbox-ui/progressive-blur";
// Wrap your scrollable container in `relative overflow-hidden`, then add:
<div className="relative h-64 overflow-hidden">
<ProgressiveBlur side="top" />
<div className="h-full overflow-y-auto">{/* content */}</div>
<ProgressiveBlur side="bottom" />
</div>;The component is position: absolute + pointer-events-none. Parent needs a non-static position and overflow-hidden so the inner scroller slides under the blur instead of scrolling it away.
| Prop | Type | Default | Notes |
|---|---|---|---|
side | "top" | "bottom" | "left" | "right" | "bottom" | Which edge the blur is strongest at. |
size | number | string | 160 | Thickness of the blurred band. Number → px. |
strength | number | 1 | Multiplier on the base blur ramp (1, 2, 4, 8, 12, 16 px). |
tint | boolean | false | Adds a fading background tint using --background. |
tintStrength | number | 0.6 | Tint opacity at the solid edge (0–1). |
A single backdrop-filter: blur() with a fading mask leaves a visible seam where the blur stops. Stacking six bands with increasing blur amounts and slightly offset masks produces a perceptually smooth ramp — closer to what iOS / macOS does natively.
Pin to the bottom for sticky footers, dock bars, or "see more" fades.
<ProgressiveBlur side="bottom" size={120} />Multiply the base blur ramp.
<ProgressiveBlur side="top" size={160} strength={1.5} />Adds a fading background-color overlay alongside the blur (uses --background).
<ProgressiveBlur side="top" size={160} tint tintStrength={0.7} /><ProgressiveBlur side="left" size={80} />
<ProgressiveBlur side="right" size={80} />