如何实现平滑渐变模糊效果：类似透明到深色的柔化过渡

本文介绍一种结合 CSS mask 与 backdrop-filter 的现代方案，替代传统伪元素叠加渐变的生硬方式，实现真正平滑、自然的模糊过渡效果，兼容性良好且无需额外 HTML 结构。

本文介绍一种结合 css `mask` 与 `backdrop-filter` 的现代方案，替代传统伪元素叠加渐变的生硬方式，实现真正平滑、自然的模糊过渡效果，兼容性良好且无需额外 html 结构。

在网页设计中，常需为图片添加底部渐变模糊遮罩（如从深色向透明过渡），以提升文字可读性或营造视觉层次。但直接使用 linear-gradient + backdrop-filter: blur() 的组合（如 .shadow 方案）往往导致边缘生硬、模糊不连贯——这是因为渐变本身无软边，而 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; /* 等价于 top: auto; right: 0; bottom: 0; left: 0 */  height: 200px; /* 模糊区域高度，建议略大于预期遮罩范围 */  pointer-events: none;  /* 蒙版：从完全透明（#0000）到半黑（#0005）再到全黑（#000），控制模糊可见度 */  -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));}

<div class="img"></div>

✅ 关键优势说明：

• mask 是基于 alpha 通道的软边控制，天然支持抗锯齿渐变，比 background: linear-gradient() 的硬边界更柔和；
• backdrop-filter 作用于父容器背景（即图片），模糊结果随蒙版透明度线性衰减，形成自然过渡；
• 仅需一个伪元素，结构极简，无冗余 DOM；
• 使用 inset: auto 0 0 替代 bottom: 0 更健壮，适配不同定位上下文。

⚠️ 注意事项：

• mask 属性需添加 -webkit-mask 前缀以保障 Safari 兼容性（Chrome/Firefox 已原生支持）；
• backdrop-filter 在部分旧版浏览器（如 Firefox 早期版本）中需启用实验性功能，生产环境建议加 @supports 检测；
• 避免将 blur() 值设得过大（如 >15px），可能导致性能下降或边缘光晕；
• 若需响应式适配，建议用 vh 或 clamp() 动态控制 .img::before 高度，而非固定 200px。

通过此方法，你将获得真正「如丝般顺滑」的模糊渐变——不再是机械的明暗切换，而是光影自然弥散的视觉体验。