使用styled-components实现div左下角渐变时模糊效果丢失如何解决

问题现象 #

需要实现参考图所示的左下角渐变发光效果：

对设置了linear-gradient的元素做裁剪时，会丢失blur模糊效果，初始实现代码如下：

const Container = styled.div`
  width: 680px;
  height: 266px;
  background: #13132b;
  border-radius: 8px;
  padding: 11px 24px 40px 20px;
  margin: 20px 0px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  outline: solid 2px orange;
  position: relative;
  box-sizing: border-box;

  &::before {
    outline: solid 2px red;
    box-sizing: inherit;
    border-radius: inherit;
    width: inherit;
    height: inherit;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    position: absolute;
    background: linear-gradient(119.57deg, #21db99 36.22%, #daf33e 80.95%);
    opacity: 0.6;
    filter: blur(200px);
    clip-path: inset(0 round 8px);

    content: "";
  }
`;

失效原因 #

clip-path会严格按照定义的路径裁切元素所有可视内容，包括filter: blur()生成的模糊溢出半透明像素，大半径模糊超出裁剪路径的部分会被直接丢弃，视觉上就像模糊效果丢失。同时伪元素和容器尺寸完全一致时，200px的模糊半径大部分区域都落在裁剪路径外，无法呈现预期的柔化边缘。

修复代码 #

const Container = styled.div`
  width: 680px;
  height: 266px;
  background: #13132b;
  border-radius: 8px;
  padding: 11px 24px 40px 20px;
  margin: 20px 0px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  outline: solid 2px orange;
  position: relative;
  box-sizing: border-box;
  /* 父级加溢出隐藏，配合自身圆角自然裁切模糊效果，完整保留blur柔边 */
  overflow: hidden;

  &::before {
    box-sizing: inherit;
    position: absolute;
    /* 把渐变块定位到左下角，适当外偏移让过渡更自然 */
    left: -120px;
    bottom: -120px;
    /* 渐变块不需要铺满全容器，设置足够尺寸即可 */
    width: 320px;
    height: 320px;
    background: linear-gradient(119.57deg, #21db99 36.22%, #daf33e 80.95%);
    opacity: 0.6;
    filter: blur(120px);
    /* 层级低于容器内容，避免遮挡文字等元素 */
    z-index: 0;
    content: "";
  }

  /* 容器内所有内容提升层级，显示在渐变层上方 */
  & > * {
    position: relative;
    z-index: 1;
  }
`;

调整说明 #

• 放弃clip-path裁剪方案，用父容器自带的overflow: hidden+border-radius做边缘裁切，这种方式对filter模糊效果的兼容性更好，不会裁掉模糊柔边
• 渐变伪元素缩小后定位到左下角，相比铺满全容器的写法性能更好，也能精准控制渐变的显示范围
• 可根据实际视觉需求调整blur半径、伪元素的偏移量和尺寸，匹配设计稿的渐变浓度和覆盖范围

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