[英]Create a radial gradient with a smooth transition
I want to create something like in the first image, but I am getting something like that in the second image.我想创建类似于第一张图片的东西,但我在第二张图片中得到了类似的东西。 After searching for a while, I found out about
radial-gradient
but I am not able to achieve that kind of smooth effect.搜索了一段时间后,我发现了
radial-gradient
但我无法达到那种平滑的效果。 I am using Tailwindcss btw.我正在使用 Tailwindcss 顺便说一句。 There is no need for the color to be the same, all I want is to get that smooth transition.
颜色不需要相同,我想要的只是平滑过渡。
My code so far:到目前为止我的代码:
tailwind.config.js 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>
You can use the bg-gradient-to-l
.您可以使用
bg-gradient-to-l
。 "to-l" means to left, you can change it to "to-br" for bottom-right. “to-l”表示向左,您可以将其更改为“to-br”表示右下角。
from-blue-100
for first color, to-red-200
for second color第一种颜色
from-blue-100
,第二种颜色to-red-200
Here is an example: https://codepen.io/lynnecodes/pen/PoWPZpL这是一个例子: https://codepen.io/lynnecodes/pen/PoWPZpL
Hope it helps希望能帮助到你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.