創建具有平滑過渡的徑向漸變

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

希望能幫助到你