创建具有平滑过渡的径向渐变

Question

我想创建类似于第一张图片的东西，但我在第二张图片中得到了类似的东西。 搜索了一段时间后，我发现了radial-gradient但我无法达到那种平滑的效果。 我正在使用 Tailwindcss 顺便说一句。 颜色不需要相同，我想要的只是平滑过渡。

到目前为止我的代码：

tailwind.config.js

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

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

Answer 1

您可以使用bg-gradient-to-l 。 “to-l”表示向左，您可以将其更改为“to-br”表示右下角。 第一种颜色from-blue-100 ，第二种颜色to-red-200

这是一个例子： https://codepen.io/lynnecodes/pen/PoWPZpL

希望能帮助到你