DEV Community

Cover image for Making gradient text with Tailwind CSS
Chris Bongers
Chris Bongers

Posted on β€’ Originally published at daily-dev-tips.com

10 3

Making gradient text with Tailwind CSS

Gradient texts are super cool, I love the vibe it gives off, and I made this CSS gradient text effect before.

Today we'll explore how we can do this in Tailwind CSS without adding any custom styles πŸ‘€.

Tailwind CSS gradient text

Let's get started by creating our heading and adding the tailwind classes we need.

<h1
  class="font-extrabold text-transparent text-8xl bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600"
>
  Tailwind CSS
</h1>
Enter fullscreen mode Exit fullscreen mode

This will be all we need to create this super cool gradient text effect. However, let's look at what these elements do.

The general styling

  • text-8xl: Makes the text font-size 6rem, so quite big
  • font-extrabold: Created a bigger font weight, so the effect pops more

The above styles are not needed for the actual effect. However, the classes below are needed to get the gradient effect we want.

  • text-transparent: This makes the actual text transparent and shows the background (which has the gradient)
  • bg-clip-text: This makes the background only show on the text outlines
  • bg-gradient-to-{flow}: This is used to state what direction the gradients flows too. (All directions)
  • from-{color}: Set the beginning color in our case to purple-400
  • to-{color}: This sets the end color, in our case pink-600

I've created this Codepen to demonstrate how it works.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Image of Stellar post

Check out Episode 1: How a Hackathon Project Became a Web3 Startup πŸš€

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

Top comments (4)

Collapse
 
sohanemon profile image
Sohanur Rahman Emon β€’

Can you please tell me how to use gradient with react-icons

Collapse
 
dailydevtips1 profile image
Chris Bongers β€’

Not sure how React icons render and what kind of gradient you are looking for.
Is this text based?

Collapse
 
sohanemon profile image
Sohanur Rahman Emon β€’

It was really awesome idea. πŸ™†β€β™€οΈ

Collapse
 
dailydevtips1 profile image
Chris Bongers β€’

Thanks a lot πŸ’–

Image of Stellar post

Check out Episode 1: How a Hackathon Project Became a Web3 Startup πŸš€

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

πŸ‘‹ Kindness is contagious

Dive into this insightful write-up, celebrated within the collaborative DEV Community. Developers at any stage are invited to contribute and elevate our shared skills.

A simple "thank you" can boost someone’s spiritsβ€”leave your kudos in the comments!

On DEV, exchanging ideas fuels progress and deepens our connections. If this post helped you, a brief note of thanks goes a long way.

Okay