| name | progressive-blur |
| description | 用多层 backdrop-filter 遮罩创建一个分层的 CSS 渐进模糊（顶部或底部），营造纵深与柔和感。当被要求"progressive blur"、"gradient blur overlay"或从视口某一边缘淡出的阶梯式模糊遮罩时使用。 |
渐进模糊技能
工作流程
- 确认位置（顶部或底部）、高度，以及相对于 UI 的 z-index。
- 提供对应的代码片段和一份简短的使用检查清单。
- 只提供有针对性的微调（高度、模糊步进、方向、不透明度停靠点）。
使用检查清单
- 把 HTML 插入
<body> 内部。
- 让
.gradient-blur 元素保持在 DOM 靠上的位置。
- 确保它后面存在背景（backdrop-filter 模糊的是其后方的内容）。
- 调整
z-index 使其位于内容之上但在模态框之下。
顶部模糊（从顶部）
<div class="gradient-blur">
<div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<style>
.gradient-blur {
position: fixed;
z-index: 5;
inset: 0 0 auto 0;
height: 12%;
pointer-events: none;
}
.gradient-blur > div,
.gradient-blur::before,
.gradient-blur::after {
position: absolute;
inset: 0;
}
.gradient-blur::before {
content: "";
z-index: 1;
backdrop-filter: blur(0.5px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 12.5%,
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 0) 37.5%);
}
.gradient-blur > div:nth-of-type(1) {
z-index: 2;
backdrop-filter: blur(1px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 12.5%,
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 1) 37.5%,
rgba(0, 0, 0, 0) 50%);
}
.gradient-blur > div:nth-of-type(2) {
z-index: 3;
backdrop-filter: blur(2px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 25%,
rgba(0, 0, 0, 1) 37.5%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 0) 62.5%);
}
.gradient-blur > div:nth-of-type(3) {
z-index: 4;
backdrop-filter: blur(4px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 37.5%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 62.5%,
rgba(0, 0, 0, 0) 75%);
}
.gradient-blur > div:nth-of-type(4) {
z-index: 5;
backdrop-filter: blur(8px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 1) 62.5%,
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 0) 87.5%);
}
.gradient-blur > div:nth-of-type(5) {
z-index: 6;
backdrop-filter: blur(16px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 62.5%,
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 1) 87.5%,
rgba(0, 0, 0, 0) 100%);
}
.gradient-blur > div:nth-of-type(6) {
z-index: 7;
backdrop-filter: blur(32px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 75%,
rgba(0, 0, 0, 1) 87.5%,
rgba(0, 0, 0, 1) 100%);
}
.gradient-blur::after {
content: "";
z-index: 8;
backdrop-filter: blur(64px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 87.5%,
rgba(0, 0, 0, 1) 100%);
}
</style>
底部模糊（从底部）
<div class="gradient-blur">
<div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<style>
.gradient-blur {
position: fixed;
z-index: 5;
inset: auto 0 0 0;
height: 65%;
pointer-events: none;
}
.gradient-blur > div,
.gradient-blur::before,
.gradient-blur::after {
position: absolute;
inset: 0;
}
.gradient-blur::before {
content: "";
z-index: 1;
backdrop-filter: ();
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
> () {
: ;
: ();
: (to bottom,
(, , , ) ,
(, , , ) ,
(, , , ) );
}
{
: ;
: ;
: ();
: (to bottom,
(, , , ) ,
(, , , ) );
}
定制旋钮
- 方向：翻转
to top ↔ to bottom。
- 高度：调整
.gradient-blur 的高度百分比。
- 强度：更改模糊值（0.5px → 64px）。
- 步进：增删图层以控制平滑度。
常见坑
backdrop-filter 需要其后方有内容；它不会模糊一个纯色背景。- 高模糊值消耗大量 GPU；在低端设备上减少步进。
- 确保保留
pointer-events: none 以避免阻挡点击。
规格缺失时应问的问题
- 模糊应从顶部还是底部开始？
- 模糊区域应有多高？
- 在低端设备上性能是需要考虑的问题吗？
