Gradient animated text with Tailwind CSS

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 w…


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)


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » Gradient animated text with Tailwind CSS." Byakkuya (ahmed zbaa) | Sciencx - Saturday July 20, 2024, https://www.scien.cx/2024/07/20/gradient-animated-text-with-tailwind-css/
HARVARD
Byakkuya (ahmed zbaa) | Sciencx Saturday July 20, 2024 » Gradient animated text with Tailwind CSS., viewed ,<https://www.scien.cx/2024/07/20/gradient-animated-text-with-tailwind-css/>
VANCOUVER
Byakkuya (ahmed zbaa) | Sciencx - » Gradient animated text with Tailwind CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/20/gradient-animated-text-with-tailwind-css/
CHICAGO
" » Gradient animated text with Tailwind CSS." Byakkuya (ahmed zbaa) | Sciencx - Accessed . https://www.scien.cx/2024/07/20/gradient-animated-text-with-tailwind-css/
IEEE
" » Gradient animated text with Tailwind CSS." Byakkuya (ahmed zbaa) | Sciencx [Online]. Available: https://www.scien.cx/2024/07/20/gradient-animated-text-with-tailwind-css/. [Accessed: ]
rf:citation
» Gradient animated text with Tailwind CSS | Byakkuya (ahmed zbaa) | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.