CODEWITHSUNDEEP
csstailwind-css
mismaah
mismaah

Reputation: 356

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.

Upvotes: 6

Views: 12776

Answers (2)

Rory
Rory

Reputation: 95

If you are looking for an alternative to the config approach, I use CSS to extend the "tailwindcss/components" import in your global styles.

In your global.css add the following. Checkout the following link for more info on working with preprocessors - https://tailwindcss.com/docs/using-with-preprocessors

@import "tailwindcss/components";
@import "./custom-components.css"; <--

Inside custom-components.css add the following.

.background-animate {
  background-size: 200%;
  -webkit-animation: AnimateBackgroud 10s ease infinite;
  -moz-animation: AnimateBackgroud 10s ease infinite;
  animation: AnimateBackgroud 10s ease infinite;
}

@keyframes AnimateBackgroud {
  0% {
    background-position: 0;
  }

  50% {
    background-position: 100%;
  }

   100% {
    background-position: 0;
  }
}

How to use;

<h1 className="background-animate bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text flex justify-center items-center content-center w-full text-transparent text-5xl select-none">
    A very important title!
</h1>


.background-animate {
  background-size: 200%;
  -webkit-animation: AnimateBackgroud 10s ease infinite;
  -moz-animation: AnimateBackgroud 10s ease infinite;
  animation: AnimateBackgroud 10s ease infinite;
}

@keyframes AnimateBackgroud {
  0% {
    background-position: 0;
  }
  50% {
    background-position: 100%;
  }
  100% {
    background-position: 0;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class="min-h-full flex items-center justify-center p-12">
    <div class="max-w-md w-full">
      <h1 class="background-animate bg-gradient-to-r from-indigo-500 via-green-500 to-pink-500 bg-clip-text flex justify-center items-center content-center w-full text-transparent text-5xl select-none py-10">
        A very important title!
      </h1>
    </div>
</body>

</html>

Upvotes: 2

Dhaifallah
Dhaifallah

Reputation: 1835

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

Upvotes: 22

Related Questions