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
Top comments (4)
Thank you, George! Such simple, clean code. It worked perfectly!
Nice. Thanks George. Simple code. No ambiguity. You're amazing
Works like a charm, thanks
Thanks so much, George! Works really well and is truly neatly written. Cheers :)