如何创建 CSS 阴影，将透明度应用于其后面的元素

Question

我试图让一个元素将阴影/模糊边缘投射到其后面的元素上，导致后者“溶解”，而不影响背景。希望下面的图片可以更好地说明我的问题。

这是我能够得到的：

虽然这是我想要实现的结果：

这是我用来制作第一张图片的代码：

html {
  height: 500px;
  background: linear-gradient(#9198E5, #E66465);
}

#back {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 200px;
  background-color: #FFBBBB;
}

#front {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 200px;
  height: 200px;
  background-color: #BBFFBB;
  box-shadow: -30px -30px 15px #BF7B9F;
}

<div id="back"></div>
<div id="front"></div>

Answer 1

不确定这是否是您要寻找的，但也许可以在框阴影十六进制值的末尾添加不透明度值？

  box-shadow: -30px -30px 15px #BF7B9Fcc;

html {
  height: 500px;
  background: linear-gradient(#9198E5, #E66465);
}

#back {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 200px;
  background-color: #FFBBBB;
}

#front {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 200px;
  height: 200px;
  background-color: #BBFFBB;
  box-shadow: -30px -30px 15px #BF7B9Fcc;
}

<div id="back"></div>
<div id="front"></div>