Browse components
Gradual Blur
A progressive edge blur built from stacked, masked backdrop-filter layers. Drop it over any scrolling area.
Installation
npx shadcn@latest add @glint-ui/gradual-blurFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/gradual-blur.json
Usage
import { GradualBlur } from "@/components/ui/gradual-blur";
<div className="relative h-96 overflow-hidden">
<div className="h-full overflow-y-auto">{/* content */}</div>
<GradualBlur position="bottom" strength={12} height={140} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| position | "top" | "bottom" | "left" | "right" | "bottom" | Edge the blur is anchored to. |
| strength | number | 12 | Blur in px at the edge. |
| height | number | 140 | Band thickness in px. |
| layers | number | 6 | Stacked layers; more is smoother. |
| exponential | boolean | true | Exponential blur ramp instead of linear. |
| fade | boolean | true | Also fade toward the background color. |
| className | string | — | Extra classes for the root element. |