模糊Div元素呈现网格状外观，如何优化边缘平滑度？

我用Tailwind CSS添加了以下div元素制作氛围感背景：

// Tailwind CSS 实现代码
<div className="relative z-0 -mb-36 rounded-full blur-[128px] opacity-100 w-48 h-48 bg-blue-500 top-20 -left-10" />
<div className="relative z-0 -mb-36 rounded-full blur-[96px] opacity-75 w-36 h-48 bg-purple-300 top-20 left-40" />

但渲染后这些元素出现带有尖锐边缘的网格状外观，想解决以下问题：如何优化渲染边缘的平滑度？实现方式是否有误？是否因模糊值过高导致？

问题原因分析 #

你的实现逻辑本身没有错误，出现网格状尖锐边缘主要是大模糊值与元素尺寸不匹配、非对称椭圆形状的渲染特性导致的：

• 当模糊值（如128px）接近甚至超过元素自身尺寸的一半时，浏览器无法获取足够的边缘像素来完成平滑的模糊扩散，会出现截断式的锯齿网格。
• 非对称的椭圆（第二个元素w-36 h-48）在大模糊下，边缘的像素过渡更难被浏览器处理，更容易出现锯齿。

优化方案 #

• 匹配模糊值与元素尺寸：增大模糊元素的尺寸，比如将w-48 h-48改为w-96 h-96，让元素尺寸远大于模糊值，给模糊扩散留出足够的像素空间，避免边缘截断。
• 添加内边距扩展渲染范围：给模糊元素添加p-[64px]（根据模糊值调整内边距大小），同时给父容器设置overflow-hidden，让模糊效果在扩展后的元素内部完整渲染，不会因为边界限制出现锯齿。
• 统一模糊元素为正方形：将非对称的椭圆元素改成正方形（如把第二个元素的w-36 h-48改为w-48 h-48），正方形的圆角模糊在浏览器中渲染更平滑，能减少网格状边缘的出现。
• 降低模糊值（可选）：如果不需要这么强的模糊效果，可以适当降低模糊值，比如把blur-[128px]改为blur-[64px]，减小模糊扩散的范围，降低浏览器渲染压力的同时也能缓解锯齿问题。

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