An overlay component that creates a soft, progressive blur effect on content below it, ideal for frosted glass designs.

Optical Frosted Glass

Mastering depth of field in modern web interfaces.

In the realm of digital design, depth is typically simulated through drop shadows and layering. However, one of the most sophisticated techniques for achieving a sense of physical space is the progressive blur.

Photographic Realism

Unlike a standard uniform blur, a progressive blur mimics the behavior of a physical camera lens. When an object moves out of focus, it doesn't instantly become a flat, homogeneous blur. Instead, the blur intensifies gradually, creating a soft, feathered edge that dissolves seamlessly into the background.

"By stacking overlapping masks and applying an exponential curve to the blur radius, we recreate optical physics in the browser."

The result is a frosted glass effect that feels incredibly tactile and premium. It completely eliminates the harsh banding often seen with basic CSS backdrop filters.

Functional Aesthetics

While progressive blur is undeniably beautiful, it also serves a functional purpose. In scrollable areas like fixed headers or sticky bottom navigation bars, a harsh cutoff can be visually jarring. A progressive blur softens this transition, allowing content to gently melt away as it scrolls underneath the overlay.

This technique anchors your interface elements without sacrificing spatial awareness. Users can still sense the content moving beneath, but their focus remains unobstructed. It's a subtle detail, but one that elevates the entire experience.

Installation

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

Usage

import ProgressiveBlur from "@/components/progressive-blur";
 
export default function ProgressiveBlurDemo() {
  return <ProgressiveBlur />;
}

Component API

ProgressiveBlur

Prop	Type	Default	Description
className?	`string`	—	Additional classes applied to the root element.
position?	"top/bottom"	"bottom"	Position of the blur effect.
height?	`string`	"12vh"	Height of the blur effect.

Notes

`--background` CSS variable

The solid-colour overlay at the end of the blur ramp uses hsl(var(--background) / 0.6) via the Tailwind class to-background/60. This variable is defined automatically when you use shadcn/ui — it lives in your globals.css (or index.css) as part of the theme block:

:root {
  --background: oklch(1 0 0); /* light mode */
}
 
.dark {
  --background: oklch(0.141 0.005 285.823); /* dark mode */
}

If you're not using shadcn/ui, define the variable yourself in your global stylesheet:

:root {
  --background: oklch(1 0 0);
}

Or swap the Tailwind classes to a hardcoded colour in the component:

// Before (shadcn)
"to-background/60 bg-gradient-to-b from-transparent";
 
// After (hardcoded)
"bg-gradient-to-b from-transparent to-white/60";
// or dark:
"bg-gradient-to-b from-transparent to-[#09090b]/60";

The component won't break without --background — the backdrop-filter layers still work — but the colour overlay will render as transparent, which may look incomplete on sharp blurred backgrounds.

Progressive Blur