本文分享一种结合 CSS mask 与 backdrop-filter 的现代实现方案，替代传统伪元素叠加渐变的生硬做法，打造真正流畅、自然的模糊过渡效果，兼容性出色且无需额外 HTML 结构。
在网页设计实践中，为图片底部添加渐变模糊遮罩，以增强文字可读性或者营造视觉层次，是一个相当普遍的需求。但坦率地讲，单纯使用 linear-gradient 搭配 backdrop-filter: blur() 的方案，效果往往难以令人满意——边缘显得突兀、模糊缺乏连贯性，看上去就像强行贴上的补丁。其根源在于，渐变本身并不具备软边缘处理能力，而 backdrop-filter 仅作用于元素自身的背景区域，无法妥善应对"透明度变化"引发的锯齿问题。
那么，真正行之有效的解决方案是什么呢？关键在于 CSS mask（蒙版）与 backdrop-filter 协同配合。
- mask 负责控制可见区域的透明度分布，支持平滑渐变，天然能够实现柔和的边缘过渡。
- backdrop-filter: blur() 则对蒙版下方的原始背景（图片）施加模糊处理。
- 两者协同作用，便能生成一种像素级别的、细腻程度堪比设计软件中高斯渐变模糊的过渡效果。
来看具体代码实现，结构其实相当简洁：
.img {
background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg);
background-size: cover;
background-position: center;
width: 500px;
height: 300px;
position: relative;
}
.img::before {
content: "";
position: absolute;
inset: auto 0 0;
height: 200px;
pointer-events: none;
-webkit-mask: linear-gradient(to top, #0000, #0005 70%, #000);
mask: linear-gradient(to top, #0000, #0005 70%, #000);
backdrop-filter: blur(10px);
background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.8));
}
✅ 为什么这套方案更具优势？
- 第一，mask 实现的是基于 alpha 通道的软边缘控制，天生具备抗锯齿特性，相比
background: linear-gradient()那种生硬的边界过渡，显得柔和得多。 - 第二，backdrop-filter 的效果会随着蒙版透明度变化而线性衰减，模糊过渡极其自然，不再是机械的明暗切换。
- 第三，结构极为精简，一个伪元素即可搞定，无需额外的 DOM 节点。
- 第四，采用
inset: auto 0 0替代传统的bottom: 0，在各种定位上下文中都更加健壮可靠。
⚠️ 几个实际开发中需要留意的地方：
mask属性记得加上-webkit-mask前缀，确保 Safari 浏览器的兼容性。Chrome 和 Firefox 已经原生支持该属性。backdrop-filter在一些老版本浏览器（例如早期的 Firefox）中仍属于实验性功能，生产环境建议添加@supports检测作为降级兜底。- 模糊半径不宜设置过大，超过15px 不仅可能影响渲染性能，还会在边缘产生光晕，反而影响视觉效果。
- 如果需要适配响应式布局，建议使用
vh或clamp()来动态控制.img::before的高度，而不是固定使用 200px。
运用这套方法，你将获得一种"如丝般顺滑"的模糊渐变体验——不再生硬突兀，而是光影自然弥散的视觉享受。
