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. I am using Tailwindcss btw. 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
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
. "to-l" means to left, you can change it to "to-br" for bottom-right. from-blue-100
for first color, to-red-200
for second color
Here is an example: https://codepen.io/lynnecodes/pen/PoWPZpL
Hope it helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.