Tailwind background gradient transition

Question

Does Tailwind CSS allow transitions of gradients i.e. changing the 'from' or 'to' color so that the gradient of either color changes by a transition?

What I have tried:

<button class="transition duration-500 ease-in-out bg-gradient-to-t from-black to-white hover:to-red-500">
    Hover me
</button>

From solid to gradient, you can add an absolute div on top with solid background that turns into transparent with a transition, so the one behind with gradient will appear slowly :) — Franco Méndez, Jan 23 '22 at 04:48
@FrancoMéndez That's exactly the solution I went for and the result is visually beautiful. If you create a more detailed post with a sandbox link (I personally used React to make this work), I'll mark it as a selected answer. — moishinetzer, Feb 15 '23 at 15:46
You clearly stated that you needed the gradient itself to transition, so please either update your original question to be more concise or answer it yourself to help the thousands of people that find this thread. — Tom, Mar 30 '23 at 08:13

score 23 · Answer 1 · answered Jun 05 '21 at 20:46

As chojinicki already pointed out, it is not possible without any workarounds, especially without adding extensions to your config file. Because I needed the exact same for my project, I created my own workaround for it.

You have to double the background size of the element and transition the background position using transition-all to get the desired effect. Note that you require the via- gradient stop.

Tailwind Play: https://play.tailwindcss.com/XFQDCOKQ8L

<button className="transition-all duration-500 bg-gradient-to-t to-white via-black from-red-500 bg-size-200 bg-pos-0 hover:bg-pos-100">
    Hover me
</button>

tailwind.config.js

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

Unfortunately, it is very limited and doesn't exactly work with your exact example provided, however this is the closest you can get.

chojnicki · Answer 2 · 2021-04-21T22:58:52.033

Short answer No, but not because of lack this functionality in Tailwind but rather in CSS itself. Reason for that is probably performance issues - browser engine would have to render separate gradient for every frame of animation.

This is common question: Use CSS3 transitions with gradient backgrounds

You can only try to use some workaround (depends what exactly effect you expect) like background position, opacity etc (examples in linked question and plenty tutorials online). If something works for you - just extract this as Tailwind utility if you need this in multiple places.

https://tailwindcss.com/docs/adding-new-utilities

Tailwind background gradient transition

2 Answers2