As of Tailwind 1.7, you can create gradients without a single line of CSS 🎨. In this tutorial, I'll show you how easy it is to add gradients to your designs using Tailwind.
Each gradient will typically have a few colors. It will have a start color and an end color. If you want an additional color added, you can also specify a middle color.
Using the from- utility class we can specify our starting color. For instance if we wanted our background color to start at blue we would specify the following:
<div class="from-blue-600 bg-gradient-to-r w-full h-64 block"></div>
Notice from the code above, we also have another utility class called
.bg-gradient-to-r; this must be included for gradients to work. This class will tell our element that we want the background gradient to flow to the right.
Here is an example of what this element will look like:
In the example above, our gradient flows to the right
.from-blue-600, to a transparent background. Instead of a transparent background, we can choose to specify the end color.
If we want to specify an ending color for our gradient we can use the
.to- utility class like so:
<div class="from-blue-600 to-purple-500 bg-gradient-to-r w-full h-64 block"></div>
And we would end up with the following gradient background:Checkout our latest product - the ultimate tailwindcss page creator 🚀
Next, if we wanted to add more color to our gradient, we can specify a middle color.
In order to specify a middle color in our gradient we can utilize the
.via- class, like so:
<div class="from-blue-600 via-teal-500 to-purple-500 bg-gradient-to-r w-full h-64 block"></div>
And we would end up with the following gradient background:
If you phrase it like a sentence, it's easier to remember. "I want my background gradient to flow to the right, and I want it to go from blue, via teal, to purple."
In the previous example, we've been using
.bg-gradient-to-r; however, there are multiple directions that you may want your gradient to flow.
In addition to flowing your gradient to the right, you may also use the following classes.
.bg-gradient-to-tfrom bottom to top
.bg-gradient-to-rfrom left to right
.bg-gradient-to-bottomfrom top to bottom
.bg-gradient-to-lfrom right to left
You can see a quick example of each of the gradient directions below:
There are also a few more directions where you can choose to create a diagonal gradient. To accomplish this, you can use the following:
.bg-gradient-to-trfrom bottom left to top right
.bg-gradient-to-brfrom top left to bottom rright
.bg-gradient-to-blfrom top right to bottom left
.bg-gradient-to-tlfrom bottom right to to top left
Take a look at a quick example of each of these diagonal gradients.
You can always extend these gradient directions to include more; however, these should cover most use-cases.
You can also apply gradients to your text elements by leveraging the
.bg-clip-text utility class.
We can use the same gradients we used above to apply a gradient background on our text element, like so:
<div class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-500 text-5xl font-black"> Tailwind Rocks! </div>
Notice that we also need to use the
.text-transparent class; otherwise, the text color would sit on top of our gradient.
Take a look at an example of our text gradient.
This is just too cool! 🍻
I hope you found this article helpful, and may the gradient force be with you. 🤓