如何实现媲美透明到深色渐变的平滑模糊效果？

要让模糊效果与从透明到深色的渐变过渡自然融合，需将模糊处理层与渐变遮罩层分离，避免直接在渐变层上应用模糊导致的边缘生硬问题。以下是优化后的实现方案：

完整代码 #

HTML #

<div class="img">
  <div class="blur-layer"></div>
  <div class="gradient-layer"></div>
</div>

CSS #

.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 .blur-layer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  pointer-events: none;
  backdrop-filter: blur(10px);
  /* 扩大模糊范围，避免渐变边缘出现硬边 */
  top: calc(100% - 160px);
}

/* 透明到深色渐变遮罩层 */
.img .gradient-layer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(360deg, rgb(0 0 0 / 100%) 0%, rgba(0,0,0,0) 100%);
}

关键优化说明 #

• 分层设计：将模糊与渐变拆分为两个独立层，模糊层先对背景做模糊处理，渐变层叠加在上方实现颜色过渡，两者效果互不干扰
• 模糊范围调整：通过top: calc(100% - 160px)让模糊层范围略大于渐变层，避免渐变边缘出现未模糊的生硬边界
• 交互兼容性：给两个层设置pointer-events: none，确保不会遮挡底层内容的交互操作

内容的提问来源于stack exchange，提问作者Vector