How to Add Gradient Background in TailwindCSS

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.

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.

gradient colors in tailwindcss

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.

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.

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.

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.

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.

Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles