Progressive Blur

Six-layer progressive backdrop blur. Stronger at the edge, fading to none toward the content. Use on sticky headers, footers, and side overlays.

Preview

Scroll inside the frame — content slides under the blurred sticky header.

Aurora

Reykjavík, Iceland

Deep current

Pacific Northwest

Canyon

Sedona, AZ

Shoreline

Big Sur, CA

Magnetar

Atacama Desert

Gallery5 photos

Install

npx shadcn@latest add @visualsandbox-ui/progressive-blur

Requires 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.json

Usage

import { 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.

Props

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.

Variants

Bottom edge

Pin to the bottom for sticky footers, dock bars, or "see more" fades.

<ProgressiveBlur side="bottom" size={120} />

Stronger

Multiply the base blur ramp.

<ProgressiveBlur side="top" size={160} strength={1.5} />

With tint

Adds a fading background-color overlay alongside the blur (uses --background).

<ProgressiveBlur side="top" size={160} tint tintStrength={0.7} />

Side edges

<ProgressiveBlur side="left" size={80} />
<ProgressiveBlur side="right" size={80} />