Transition for background gradients

[hotrush]

Is it possible to make transition work for the next code?

<button class="inline-block text-white py-3 px-5 rounded bg-gradient-to-r from-teal-500 to-blue-500 hover:via-teal-500 transition duration-500 ease-in-out">text</button>

[EricBusch]

Did you ever get this to work? I was wondering the same thing.

I have a Tailwind Play to test: https://play.tailwindcss.com/koSd0VDdpO

[adamwathan]

Unfortunately not possible with CSS, you can't transition a background image. Best you can do is transition the opacity of a transparent overlay:

https://play.tailwindcss.com/x0XGV1s1Eh

[EricBusch]

Thanks for the workaround! That's perfect!

[Wenish]

someone mayde those:
https://play.tailwindcss.com/XFQDCOKQ8L

[Wenish]

what also works with tailwind 3:
bg-gradient-to-tr from-red-700 to-blue-800 bg-[position:_0%_0%] hover:bg-[position:_100%_100%] bg-[size:_200%] h-40 w-40 transition-all duration-500

[smartercow]

This is better than the ones listed here:

Raw CSS: https://codepen.io/chriscoyier/pen/eRbLWP

Tailwind CSS: relative z-10 overflow-hidden bg-gradient-to-r from-green-700 from-40% to-lime-500
before:absolute before:rounded-full before:top-0 before:left-0
before:w-full before:h-full
before:bg-gradient-to-r before:from-primary before:to-red-600
before:transition-transform before:duration-300
before:-z-10 hover:before:translate-x-full

[leetcow]

basically making the background larger than the element and transitioning its position is the solution. that worked for me!