如何用Tailwind CSS实现平滑过渡的radial-gradient径向渐变？

我想实现平滑的径向渐变效果（类似示例图的自然扩散感），但当前用Tailwind CSS做出来的渐变过渡很生硬。我已经尝试了radial-gradient，但调不出想要的平滑效果，颜色无需和示例一致，只求过渡自然。

现有代码 #

tailwind.config.js

backgroundImage: {
    'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
}

HTML

<div class="bg-gradient-radial from-purple to-white w-96 h-96 absolute top-24 -left-24 rounded-full"></div>

效果对比 #

• 期望效果：
• 当前效果：

问题出在默认径向渐变的尺寸和过渡逻辑上，Tailwind默认的radial-gradient没有设置合适的渐变范围，导致颜色边界突兀。按以下方式调整即可实现平滑过渡：

1. 自定义渐变基础配置 #

修改tailwind.config.js，给径向渐变加上ellipse cover参数，让渐变覆盖整个元素区域，避免边界生硬：

backgroundImage: {
    'gradient-radial': 'radial-gradient(ellipse cover, var(--tw-gradient-stops))',
}

2. 优化颜色过渡逻辑 #

通过颜色透明度或中间色来柔化过渡，比如用半透明色逐步过渡到透明，而不是直接从实色跳转到白色：

<div class="bg-gradient-radial from-purple-500/70 via-purple-300/30 to-transparent w-96 h-96 absolute top-24 -left-24 rounded-full"></div>

3. 额外增强平滑感 #

如果想要更自然的扩散效果，可以给元素添加模糊滤镜，配合渐变实现柔和的边缘：

<div class="bg-gradient-radial from-purple-500/70 to-transparent w-96 h-96 absolute top-24 -left-24 rounded-full blur-3xl"></div>

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