How to Add Gradient on Text in TailwindCSS

You can add gradient colors on the text same as the background. All you need to do is to utilize gradient color classes. Specify from which color you want to start the gradient and what colors you want the gradient to take to the end.

Adding Gradient Colors on Text in TailwindCSS

Adding a gradient to a specific text is the same as adding a gradient to a background. here is a simple example of how you can use 2 different colors to have a gradient effect on a text. Please note, you have to specify 2 additional classes bg-clip-text and bg-transparent in order to work it correctly. You can check this working example online.

Adding Middle Color for Gradient in TailwindCSS

You can also add a middle color for a text gradient. The class via-{color} is used for the middle color. The example below uses 3 different colors to add a gradient to a text. You can also verify this working demo on the tailwind playground.

The output of the above will look like this.

Gradient Text in Tailwind CSS

Available Classes for Gradient Direction

There are different classes available in TailwindCSS for adding direction to gradient colors. Here is a list of all the available classes.


Adding a gradient to a text is not a very hard thing to do. All you need is 2 or 3 colors for the gradient, a direction to add the gradient, and 2 additional classes to make it work. The above examples demonstrate how text gradient works in TailwindCSS.

Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles