🌈 Generating gradient text with Tailwind CSS

Thu Oct 07 2021

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