如何用CSS实现扩散模糊覆盖层？现有代码效果不理想

我希望实现如图所示的蓝绿色模糊覆盖效果，当前使用以下CSS及HTML代码尝试实现，但无法得到理想的扩散模糊效果。可接受径向渐变或其他方案，寻求可行解决办法。

现有代码 #

HTML代码 #

<div class="right-wrapper">
  <div class="backdrop-filter-top"></div>
  <div class="backdrop-filter-bottom"></div>
</div>

CSS代码 #

.right-wrapper {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.right-wrapper .backdrop-filter-top {   
  width: 70%;   
  height: 70%;  
  position: absolute;   
  left: 5%;     
  top: 5%;  
  background-color: #43d9ad;    
  clip-path: polygon(25% 0%, 75% 35%, 100% 100%, 75% 100%, 5% 90%, 0 20%);  
  opacity: 0.4;     
  filter: blur(87px); 
}

.right-wrapper .backdrop-filter-bottom {    
  width: 70%;   
  height: 70%;  
  position: absolute;   
  right: 5%;    
  bottom: 5%;   
  background-color: #4d5bce;    
  clip-path: polygon(0 0, 80% 0, 100% 45%, 80% 100%, 10% 70%, 0 25%);   
  opacity: 0.4;     
  filter: blur(87px); 
}

问题原因 #

直接给带有clip-path的元素添加filter: blur()时，模糊效果会被裁剪路径的边界限制，无法向外扩散，导致达不到预期的模糊覆盖效果。

解决办法 #

通过容器+伪元素的方式分离裁剪路径与模糊效果：将clip-path应用到容器上，内部用放大的伪元素实现模糊，让模糊效果可以自然扩散。

修改后的代码 #

HTML代码（无需改动）

<div class="right-wrapper">
  <div class="backdrop-filter-top"></div>
  <div class="backdrop-filter-bottom"></div>
</div>

CSS代码

.right-wrapper {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  /* 若需要限制模糊范围在wrapper内，取消下面注释 */
  /* overflow: hidden; */
}

.right-wrapper .backdrop-filter-top {
  width: 70%;
  height: 70%;
  position: absolute;
  left: 5%;
  top: 5%;
  clip-path: polygon(25% 0%, 75% 35%, 100% 100%, 75% 100%, 5% 90%, 0 20%);
  position: relative;
  /* 确保伪元素在容器下方，不遮挡其他内容 */
  z-index: -1;
}

.right-wrapper .backdrop-filter-top::before {
  content: '';
  position: absolute;
  /* 放大伪元素，让模糊效果能扩散到容器外 */
  top: -40%;
  left: -40%;
  right: -40%;
  bottom: -40%;
  background-color: #43d9ad;
  opacity: 0.4;
  filter: blur(50px);
}

.right-wrapper .backdrop-filter-bottom {
  width: 70%;
  height: 70%;
  position: absolute;
  right: 5%;
  bottom: 5%;
  clip-path: polygon(0 0, 80% 0, 100% 45%, 80% 100%, 10% 70%, 0 25%);
  position: relative;
  z-index: -1;
}

.right-wrapper .backdrop-filter-bottom::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  right: -40%;
  bottom: -40%;
  background-color: #4d5bce;
  opacity: 0.4;
  filter: blur(50px);
}

可选优化：径向渐变增强自然感 #

如果想要更柔和的边缘过渡，可以将伪元素的纯色背景替换为径向渐变，让颜色从中心向外逐渐透明：

/* 替换backdrop-filter-top的伪元素背景 */
background: radial-gradient(circle, rgba(67,217,173,0.6) 0%, rgba(67,217,173,0) 70%);

/* 替换backdrop-filter-bottom的伪元素背景 */
background: radial-gradient(circle, rgba(77,91,206,0.6) 0%, rgba(77,91,206,0) 70%);

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