Progressive Blur
捲動內容邊緣的漸進模糊遮罩，越靠邊越模糊，讓內容平滑淡入淡出。
疊層 backdrop-filter 遮罩：把多個模糊層各切成一段窗口、逐層加倍並往邊緣位移，累積出「越靠邊越模糊」的漸進效果。把它丟進任何 relative 容器的邊緣即可。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
96
6
0.5
<ProgressiveBlur />
安裝
npx shadcn@latest add https://webberui.com/r/progressive-blur.json或在 components.json 設定 registries 後，改用 @webberui/progressive-blur 安裝。
從 registry JSON（/r/progressive-blur.json 的 files[0].content）複製 progressive-blur.tsx 原始碼到你的 components/ui/ 目錄。此元件只用到 @/lib/utils 的 cn，無需額外安裝套件：
npm install clsx tailwind-merge使用
把 ProgressiveBlur 放進要遮罩的 relative 容器裡，指定貼齊的邊即可。它是 pointer-events-none 的純視覺覆蓋層，不會擋住底下的捲動或點擊。
import { ProgressiveBlur } from "@/components/ui/progressive-blur";
<div className="relative h-80 overflow-auto">
{/* 你的捲動內容 */}
<ProgressiveBlur side="top" size={80} />
<ProgressiveBlur side="bottom" size={80} />
</div>side 可為 "top"、"bottom"、"left"、"right"；同一容器可同時放多個邊。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
side | "top" | "bottom" | "left" | "right" | "bottom" | 模糊貼齊、加深的邊 |
size | number | string | 96 | 遮罩沿該邊的厚度（數字為 px） |
layers | number | 6 | 疊層數，越多層漸變越滑順 |
blur | number | 0.5 | 第一層的模糊半徑（px），之後每層加倍 |
tint | string | — | 沿邊緣由透明淡入到此色，可接續背景蓋住內容 |
className | string | — | 透傳到覆蓋層容器 |
說明
- 每層佔
100 / layers的窗口寬度，相鄰窗口刻意重疊以消除硬邊色帶；模糊半徑逐層加倍，最靠邊的一層最模糊。 blur為0.5、layers為6時，最外層模糊約為16px；想要更濃可調高blur或layers。- 覆蓋層為
pointer-events-none，底下內容維持可捲動、可點擊。 - 若瀏覽器不支援
backdrop-filter，此層會靜默失效而不影響底下內容；需要在該情況下仍蓋住內容時，搭配tint提供漸層底色。