用途：生成顶部或底部的分层 CSS 渐进模糊（progressive blur），通过多层 backdrop-filter 与 mask 叠加，让模糊由弱到强平滑过渡，形成纵深与柔和感。
主要能力：提供顶部模糊与底部模糊两套可直接使用的 HTML/CSS 片段；每套由 .gradient-blur 容器、6 个子 div 以及 ::before、::after 伪元素组成，模糊值从 0.5px 逐级递增到 64px，并用 linear-gradient 遮罩控制各层可见区间。
使用方式：将 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。若规格缺失，可先确认模糊从顶部还是底部开始、模糊区域高度、以及是否需考虑低端设备性能。