Chromium（Brave）浏览器径向渐变背景CSS模糊效果异常如何解决

方案1：扩大模糊元素渲染范围（兼容性最优） #

旧版Chromium内核计算大数值blur滤镜的渲染边界时存在bug，会裁剪元素盒外的模糊区域，导致效果异常。主动扩大背景元素的尺寸即可抵消裁剪影响，修复后的CSS如下：

.background {
  position: absolute;
  width: calc(100% + 400px);
  height: calc(500px + 400px);
  left: -200px;
  top: -200px;
  background-image: radial-gradient(red, white);
  filter: blur(254px);
  will-change: filter;
  transform: translateZ(0);
}

也可以用border: 200px solid transparent; box-sizing: border-box;替换宽高和定位修改，效果一致。

方案2：用径向渐变直接模拟模糊效果 #

无需使用blur滤镜，直接调整径向渐变的过渡范围模拟模糊效果，完全规避滤镜兼容性问题：

.background {
  position: absolute;
  width: 100%;
  height: 500px;
  background-image: radial-gradient(red 0%, white 70%);
}

补充说明 #

该问题属于Chromium 95及更早版本的已知渲染bug，后续新版本Chromium内核已经完成修复，若无需兼容过旧版本浏览器，引导用户升级内核即可解决。

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