如何为透明背景div创建渐变盒阴影并隐藏伪元素重叠区域？

你可以通过裁剪或遮罩伪元素的方式，让渐变模糊效果仅显示在div外部，避免穿透半透明背景。以下是两种可行方案：

方案一：使用clip-path裁剪伪元素 #

核心思路是让伪元素超出div范围，再剪掉中间与div重叠的部分，只保留外围模糊区域：

div{
  position: relative; /* 必须设置，作为伪元素的定位基准 */
  height:200px;
  width:200px;
  background-color: rgba(255,255,255,0.3);
}
div::before{
  content:'';
  z-index: -1;
  position: absolute;
  /* 尺寸比div大出模糊半径的2倍，确保模糊效果完整覆盖四周 */
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  left: -10px;
  top: -10px;
  background: linear-gradient(#e66465, #9198e5);
  filter: blur(10px);
  /* 裁剪掉中间与div重叠的区域，裁剪距离等于模糊半径 */
  clip-path: inset(10px 10px 10px 10px);
}

方案二：使用mask属性隐藏中间区域 #

通过径向渐变遮罩，让伪元素中间区域透明，仅显示外围模糊部分：

div{
  position: relative;
  height:200px;
  width:200px;
  background-color: rgba(255,255,255,0.3);
}
div::before{
  content:'';
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#e66465, #9198e5);
  filter: blur(10px);
  /* mask设置中间透明，外围显示伪元素内容 */
  mask: radial-gradient(circle, transparent 100%, black 100%);
  mask-size: calc(100% - 20px) calc(100% - 20px);
  mask-position: center;
  mask-repeat: no-repeat;
}

两种方案都能实现：div半透明背景下，仅外围显示渐变模糊阴影，伪元素不会穿透div内部显示。

内容的提问来源于stack exchange，提问作者Prokop Lošťák