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.
1 2 3 4 5 6 7 8 9 10 11 |
<div class="flex h-screen bg-gray-50 items-center space-y-4 flex-col justify-center"> <h1 class="text-4xl font-bold"> <span class="bg-clip-text text-transparent bg-gradient-to-l from-cyan-400 to-indigo-800"> TailwindCSS is awesome. </span> </h1> </div> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="flex h-screen bg-gray-50 items-center space-y-4 flex-col justify-center"> <h1 class="text-4xl font-bold"> <span class="bg-clip-text text-transparent bg-gradient-to-l from-cyan-400 to-indigo-800 via-pink-500"> TailwindCSS is awesome. </span> </h1> </div> |
The output of the above will look like this.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// top bg-gradient-to-t // bottom bg-gradient-to-b // left bg-gradient-to-l // right bg-gradient-to-t // top-right bg-gradient-to-tr // top-left bg-gradient-to-tl // bottom-right bg-gradient-to-tr // bottom-left bg-gradient-to-bl |
Conclusion
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.