Gradient backgrounds are almost everywhere nowadays. They make the User Interface very pleasing and beautiful for users. TailwindCSS provides different gradient classes to add in backgrounds or anything you want.
Gradient Direction Classes in TailwindCSS
When you are going to add a gradient to your background, the first thing you need to add is the gradient direction. In Tailwind, you can use any of the following classes to add direction for your gradient.
|
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 |
Adding Colors for Gradient in TailwindCSS
The next class you need is the color from and color to values for the gradient. You can use any color from TailwindCSS colors for this value. The generic syntax for from value is from-cyan-300 and for to value is to-blue-400. After combining the direction, from value, and to value for gradient, you’ll get a gradient color. The example is given below that you can verify online.
|
1 2 3 4 5 6 7 |
<div class="bg-gradient-to-r from-cyan-300 to-blue-400"> </div> |
Using 3 Gradient Colors in TailwindCSS
In TailwindCSS, if you want to combine 3 different colors for a gradient background, you can do that with a middle color using via-color class. Here is an example of using 3 different gradient colors for a background in TailwindCSS. You can check the working code example on tailwind playground.
|
1 2 3 4 5 6 7 8 9 |
<div class="bg-gradient-to-r from-cyan-300 via-blue-500 to-blue-400 h-screen py-40"> </div> |
Gradient Color Positions for Background in TailwindCSS v3.3
TailwindCSS version 3.3 comes with new features and one of them is to use the classes for specifying the position for gradients. The following code explains how to specify positions for gradient colors. You can check the working code example online.
|
1 2 3 4 5 6 7 8 9 |
<div class="bg-gradient-to-r from-cyan-300 from-10% to-blue-400 to-40% h-screen py-40"> <h1 class="text-center font-bold text-4xl mt-40">Gradient Background in TailwindCSS</h1> </div> |
Adding Gradient Colors to Buttons
You can also add gradient backgrounds to buttons with TailwindCSS. This would be the same as adding a gradient to div elements. The following example demonstrates how a link element can have a gradient background. You can check the demo online on play.tailwind.com.
|
1 2 3 4 5 6 7 8 |
<a href="#" class="px-4 py-2 bg-gradient-to-tl from-green-300 to-blue-300 rounded-md" > Learn More </a> |
Changing Gradients on Hover State
In addition, you can also change the gradient backgrounds on the hover state of buttons or div elements. The hover: modifier can be used to achieve the results you want. Here is an example of changing gradient color in a hover state.
|
1 2 3 4 5 6 7 8 9 10 |
<a href="#" class="px-4 py-2 bg-gradient-to-l from-green-300 to-blue-300 via-purple-200 rounded-md hover:from-slate-300 hover:to-blue-600" > Learn More </a> |
Conclusion
Adding Gradient backgrounds to buttons or div elements is very easy in TailwindCSS. All you need to do is to add direction class, from color and to color classes. You can also add the middle color for the gradient in addition to two different colors. Check official documentation for more information about gradient backgrounds.