This content originally appeared on DEV Community and was authored by Byakkuya (ahmed zbaa)
I've was working on a 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 and i want something simple because i use Tailwind css
so i find it somewhere online
and i wanted to share it with you
first you gonna add this to tailwind.config.js
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',
},
},
},
}
}
}
then add these classes wherever you want
<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">
Gradient animated text with Tailwind CSS
</h1>
This content originally appeared on DEV Community and was authored by Byakkuya (ahmed zbaa)
Byakkuya (ahmed zbaa) | Sciencx (2024-07-20T12:23:15+00:00) Gradient animated text with Tailwind CSS. Retrieved from https://www.scien.cx/2024/07/20/gradient-animated-text-with-tailwind-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.