Beautiful Gradient Text in TailwindCSS Again

We all know how annoying gradient text can be, well with TailwindCSS it's a doddle. Create some stunning gradient text for your new website using the built-in Tailwind utilities.

<h1 class="text-transparent bg-clip-text bg-gradient-to-br from-purple-400 to-pink-600">
  Gradient Text!
</h1>

Simply combine a couple of classes: bg-clip-text bg-transparent this will mask the background onto the text allowing us to then create our gradient, for this example, we have created a purple to pink gradient, but you can pick any colours you want.

You can use these in your landing/marketing pages to give a playful yet stunning look to those pesky headings.

👍 Like our content? Check out our Twitter @waveygroup