用途：在网页顶部或底部创建分层渐进模糊（progressive blur），通过多层 backdrop-filter 配合线性渐变遮罩，让模糊由弱到强平滑过渡，营造纵深与柔和感。
主要能力：提供顶部模糊与底部模糊两套可直接使用的 HTML/CSS 片段；每套由 .gradient-blur 容器、六个子 div 以及 ::before、::after 伪元素组成，模糊值从 0.5px 逐级递增到 64px，并用 mask 控制各层可见区间，从而叠加出连续渐变效果。
使用方式：把 HTML 插入 <body>，将 .gradient-blur 放在 DOM 靠前位置；确保其背后有实际内容（backdrop-filter 模糊的是身后内容）；调整 z-index 使其位于内容之上、模态框之下；保留 pointer-events: none 以免挡住点击。
可调项：方向（to top 与 to bottom 互换）、高度（.gradient-blur 的 height 百分比）、强度（各层 blur 值）、层数（增删子 div 控制平滑度）。
适用场景：固定顶栏或底栏的模糊过渡、滚动内容边缘柔化、需要视觉层次感的界面。
限制与注意：backdrop-filter 需要背后有内容，纯色背景不会产生模糊；高模糊值较耗 GPU，低端设备应减少层数；需保持 pointer-events: none。资料未提供安装命令、收费、平台支持等其它信息。