DEV Community

George Tudor
George Tudor

Posted on • Updated on

Gradient animated text with Tailwind CSS

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',
          },
        },
      },
    }
  }
}


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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

Support & follow me

Buy me a coffee Twitter GitHub Linkedin

Top comments (4)

Collapse
 
emilynilsen profile image
Emily Nilsen

Thank you, George! Such simple, clean code. It worked perfectly!

Collapse
 
digitaldrreamer profile image
Abdullah Bashir

Nice. Thanks George. Simple code. No ambiguity. You're amazing

Collapse
 
shahzadaalihassan profile image
Shahzada Ali Hassan

Works like a charm, thanks

Collapse
 
anjapcodes profile image
Anja Petry

Thanks so much, George! Works really well and is truly neatly written. Cheers :)