Gradient animated text with Tailwind CSS

#tailwindcss #animation #css #beginners

I've been working on a new project recently and I wanted to add some cool effect on my landing page's hero section's text. I've seen this effect on lots of sites this year but I've never been curious how it was made.

I mainly work with Tailwind CSS because it's really easy to use and developer friendly. I'm not a designer and CSS is not my cup of tea. I prefer to make things work and look relatively good in short time rather dealing with CSS/SCSS/SASS files.

So my approach was really simple and what I've needed was some keyframe and a clipped text.

To achieve this we need to add our custom text animation and keyframes into tailwind.config.js. We can use any keyword to define these, but since we're dealing with text I've decided to name them text.

Note that you have to add the animation and keyframes definitions into your extend object.

modules.export = {
  theme: {
    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',
          },
        },
      },
    }
  }
}

Now what's left to be done is to add your text wherever we want it.

<h1 class="animate-text bg-gradient-to-r from-teal-500 via-purple-500 to-orange-500 bg-clip-text text-transparent text-5xl font-black">
    Hello World
</h1>

As you can see, we have the animate-text class that is using the tailwind.config.js definitions, our gradient and 2 more extra classes: bg-clip-text that's clipping the background to our text and text-transparent that's making exactly what it says in order to be able to see the animated background.

That's all. Here's a Tailwind Playground with this in action:
https://play.tailwindcss.com/VCZwwz1e3R