Hi there, I'm Marcos!

🌈 Generating gradient text with Tailwind CSS

Have you ever wanted to create gradient text as the following?

To infinity and beyond

With Tailwind CSS you can achieve it witih just 5 classnames:

<span
  className="bg-gradient-to-r from-cyan-400 to-emerald-500 
             bg-clip-text text-transparent"
>
  To infinity and beyond
</span>
  • bg-gradient-to-r will set the background to a gradient from the left to the right
  • from-cyan-400 will set the starting color as cyan 400 (#22D3EE), it can be set to any Tailwind color
  • to-emerald-500 will set the ending color as emerald 500 (#10B981), it can be set to any Tailwind color
  • bg-clip-text will make the background to be clipped behind the text
  • text-transparent will make the font color to be transparent so the clipped background is visible through it