background gradient duration

[CFarhad]

hello.
i have important question. there is a button and it has default gradient background with bg-gradient-to-r from-cyan-500 to-blue-500;
i want if button is hover gradient background change to hover:from-blue-500 hover:to-cyan-500 slow , but not working.

who can help me guys

[NovusOpus]

This is not posible without a work around. Since currently gradients don't support transitions. This is not just for Tailwind CSS but also for CSS in general.

One way to archive this, is to double the background size of the element and transition the background position.

By extending backgroundSize and backgroundPosition in our tailwind.config. Like this:

module.exports = {
  theme: {
    extend: {
      backgroundSize: {
        'size-200': '200% 200%',
      },
      backgroundPosition: {
        'pos-0': '0% 0%',
        'pos-100': '100% 100%',
      },
    },
  },
  plugins: [],
}

And the button should be like this:

<button class="p-10 text-white rounded duration-500 bg-gradient-to-r from-cyan-500 via-blue-500 to-cyan-500 bg-size-200 bg-pos-0 hover:bg-pos-100">Hover me</button>

Note that we use the via-{color} Gradient Color Stops, to get the desired gradient side swap.

Working Example: Tailwind Play

Sources: Stack Overflow -Tailwind Gradient Transition, Stack Overflow - CSS Gradient Transitions

Update: Added an alternative Way Shared by Tailwind CSS Staff.

Another way is to have an "overlay" gradient with different colors, and animate the opacity of that overlay on hover.
Like @adamwathan explains in this commend, or Like @simonswiss example in another commend

[newbelaravel]

In case anyone wants in tailwind v4
https://play.tailwindcss.com/HltHV6nx4Z
Much appreciated!