An overlay for the edge of a container that blurs the content under it a little more with every pixel, built from stacked backdrop-filter layers.
Field notes / No. 14
Every page ends somewhere. The best interfaces do not cut their content off with a hard line, they let it dissolve into the margin so the eye knows there is more without being told.
A progressive blur does that work. Each layer softens a little more than the one before, and the result reads as depth instead of a wall.
Scroll slowly, and notice how the lettering loses its edges first and its shape last. That order is what makes the effect feel natural.
Use it above a sticky header, beneath a long list, or beside a carousel that continues past the frame.
Field notes / No. 14
Every page ends somewhere. The best interfaces do not cut their content off with a hard line, they let it dissolve into the margin so the eye knows there is more without being told.
A progressive blur does that work. Each layer softens a little more than the one before, and the result reads as depth instead of a wall.
Scroll slowly, and notice how the lettering loses its edges first and its shape last. That order is what makes the effect feel natural.
Use it above a sticky header, beneath a long list, or beside a carousel that continues past the frame.
npx shadcn@latest add https://hyperblur.dev/r/edge-gradual-blur.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/edge-gradual-blur.tsx.
import { EdgeGradualBlur } from "@/components/hyperblur/edge-gradual-blur"
<div style={{ position: "relative", height: 240, overflow: "hidden" }}>{content}<EdgeGradualBlur position="bottom" height={72} /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| position | "top" | "bottom" | "left" | "right" | "bottom" | Which edge of the parent the blur sits on. The parent needs position: relative. |
| height | number | string | 64 | Size of the blurred band along its axis. Numbers are pixels. |
| strength | number | 1 | Multiplier for the blur radius of every layer. |
| layers | number | 6 | Number of stacked blur layers, from 2 to 10. More layers give a smoother ramp. |
| tint | string | Optional color that the band fades into, usually the background of the parent. |