如何实现从透明到深色的平滑渐变模糊过渡

本文分享一种结合 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。

运用这套方法，你将获得一种"如丝般顺滑"的模糊渐变体验——不再生硬突兀，而是光影自然弥散的视觉享受。