如何制作边缘柔和的SVG-CSS模糊渐变效果

核心思路 #

别用两个独立div拆分渐变和模糊效果，要么把渐变、模糊整合到同一个元素里，通过遮罩实现柔和过渡；要么给模糊元素的衔接处加过渡渐变，让两个区域的视觉效果自然融合，避免生硬分界。

具体实现方案 #

方案1：单元素整合渐变与模糊 #

把渐变背景、模糊滤镜和渐变遮罩放在同一个元素中，让模糊边缘自然衰减：

.soft-blur-container {
  backdrop-filter: blur(12px);
  /* 叠加渐变背景 */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
  /* 用渐变遮罩让底部边缘柔和过渡 */
  mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}

遮罩会让模糊效果从清晰逐渐过渡到透明，彻底消除生硬边缘。

方案2：双元素的过渡衔接优化 #

如果必须保留两个div结构，给下方模糊div的顶部加一层过渡渐变，让它和上方渐变自然衔接：

<div class="top-gradient"></div>
<div class="bottom-blur">
  <div class="transition-overlay"></div>
</div>

.top-gradient {
  height: 120px;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.bottom-blur {
  backdrop-filter: blur(10px);
  position: relative;
  height: 220px;
}

.transition-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 100%);
}

过渡层的渐变会填补两个div之间的视觉断层，让衔接处更柔和。

关键注意事项 #

• 模糊值别太大：10-15px的模糊效果更自然，过大容易导致边缘扩散过度。
• 渐变透明度要平缓：避免从完全透明到完全不透明的突变，可增加中间色标，比如0%, 60% rgba(255,255,255,0), 85% rgba(255,255,255,0.6), 100% rgba(255,255,255,0.8)。
• 优先用mask-image：它是实现模糊边缘柔和过渡的核心，记得加上webkit前缀兼容不同浏览器。

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