'How to animate text gradient color change in Tailwind?

I have a div with text inside that has a gradient color scheme.

<div
      className="bg-gradient-to-r bg-clip-text text-transparent from-indigo-500 to-purple-500"
    >
      SampleText
</div>

I want to animate it so that the gradient keeps smoothly changing between from-indigo-500 to-purple-500 and from-purple-500 to-indigo-500 infinitely with a set duration.

csstailwind-css


Solution 1:[1]

There is a simple way to achieve what you want, here is how :

1- First go to tailwind.config.js and add this inside extend

 extend: {
      'animation': {
            'text':'text 5s ease infinite',
        },
        'keyframes': {
            'text': {
                '0%, 100%': {
                   'background-size':'200% 200%',
                    'background-position': 'left center'
                },
                '50%': {
                   'background-size':'200% 200%',
                    'background-position': 'right center'
                }
            },
        }
    },

2- Then add these classes to your div :

<div class="text-9xl font-semibold 
            bg-gradient-to-r bg-clip-text  text-transparent 
            from-indigo-500 via-purple-500 to-indigo-500
            animate-text
            ">
      SampleText
</div>

Take a look HERE

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions