如何实现平滑渐变模糊效果（类似透明到深色的柔化过渡）-html教程-PHP中文网

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

本文介绍一种结合 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));
}