浏览器间径向渐变模糊效果差异及解决方案咨询

针对Firefox对filter: blur()的100px上限限制，这里有几个实用的替代方案，能实现你需要的圆形向外模糊消失效果：

方案1：叠加多层blur滤镜 #

Firefox虽然单条blur()的上限是100px，但允许叠加多个blur滤镜，总模糊量会累加。直接修改你的filter属性即可：

.right__circle {
    width: 500px;
    height: 500px;
    border-radius: 50%; /* 用50%比固定值更适配响应式 */
    /* 叠加3层blur，总模糊量等价于250px */
    filter: blur(100px) blur(100px) blur(50px);
    background: radial-gradient(rgba(29, 144, 250, .58), rgba(29, 144, 250, 0)), 
                radial-gradient(rgba(29, 144, 250, .58), rgba(29, 144, 250, 0)), 
                radial-gradient(rgba(29, 144, 250, .58), rgba(29, 144, 250, 0));
}

这个方法完全基于你原有的代码修改，不需要额外结构，兼容性好。

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

既然你已经在使用radial-gradient，可以调整渐变参数，让颜色过渡更平缓，直接模拟出模糊扩散的效果，完全不需要依赖filter: blur()：

.right__circle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: 
        radial-gradient(circle at center, rgba(29, 144, 250, .58) 0%, rgba(29, 144, 250, .4) 40%, rgba(29, 144, 250, 0) 70%),
        radial-gradient(circle at 30% 20%, rgba(29, 144, 250, .58) 0%, rgba(29, 144, 250, .3) 35%, rgba(29, 144, 250, 0) 65%),
        radial-gradient(circle at 70% 80%, rgba(29, 144, 250, .58) 0%, rgba(29, 144, 250, .3) 35%, rgba(29, 144, 250, 0) 65%);
    /* 移除blur滤镜 */
}

通过调整渐变的颜色停止点（比如从0%到70%的透明过渡），可以精准控制扩散范围和模糊感，还能避免响应式问题。

方案3：缩放元素后应用模糊 #

通过先放大元素、应用最大模糊，再缩小回原尺寸的方式，实现视觉上的大模糊效果：

.right__circle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    /* 先放大2.5倍，应用100px模糊，再缩小回原尺寸 */
    transform: scale(0.4);
    transform-origin: center;
    filter: blur(100px);
    background: radial-gradient(rgba(29, 144, 250, .58), rgba(29, 144, 250, 0)), 
                radial-gradient(rgba(29, 144, 250, .58), rgba(29, 144, 250, 0)), 
                radial-gradient(rgba(29, 144, 250, .58), rgba(29, 144, 250, 0));
}

注意要给.right__circle的父容器设置overflow: hidden，防止放大后的元素超出可视范围。

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