Progressive Blur

A stacked backdrop-filter mask: several blur layers are each cut into one window, doubled layer by layer, and offset toward the edge, accumulating into a "blurrier the closer to the edge" progression. Just drop it at the edge of any relative container.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<ProgressiveBlur />

Installation

npx shadcn@latest add https://webberui.com/r/progressive-blur.json

Usage

Put ProgressiveBlur inside the relative container you want to mask and name the edge it hugs. It is a pointer-events-none purely visual overlay, so it never blocks scrolling or clicking underneath.

import { ProgressiveBlur } from "@/components/ui/progressive-blur";

<div className="relative h-80 overflow-auto">
  {/* your scrolling content */}
  <ProgressiveBlur side="top" size={80} />
  <ProgressiveBlur side="bottom" size={80} />
</div>

side can be "top", "bottom", "left", or "right", and one container can carry several edges at once.

Props

How it works

• Each layer occupies a window 100 / layers wide, with adjacent windows deliberately overlapping to eliminate hard-edged banding; the blur radius doubles layer by layer, so the layer closest to the edge is the blurriest.
• With blur at 0.5 and layers at 6, the outermost layer blurs by about 16px; raise blur or layers if you want it heavier.
• The overlay is pointer-events-none, so the content underneath stays scrollable and clickable.
• If the browser does not support backdrop-filter, this layer silently does nothing without affecting the content underneath; when you still need to cover the content in that case, pair it with tint to supply a gradient backing color.