TailwindCSS Gradients

TailwindCSS Gradients

Written by Tony Lea on Sep 16th, 2020 ・ Views ・ Report Post

Tony Lea Visit User Profile

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.

Starting 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.

Ending 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:

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

Next, if we wanted to add more color to our gradient, we can specify a middle color.

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.

Gradient Direction

In addition to flowing your gradient to the right, you may also use the following classes.

  • .bg-gradient-to-t from bottom to top
  • .bg-gradient-to-r from left to right
  • .bg-gradient-to-bottom from top to bottom
  • .bg-gradient-to-l from 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-tr from bottom left to top right
  • .bg-gradient-to-br from top left to bottom rright
  • .bg-gradient-to-bl from top right to bottom left
  • .bg-gradient-to-tl from 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.

Text Gradients

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! 🍻

Conclusion

Creating gradients using TailwindCSS is now easier than ever before! To learn more be sure to visit the TailwindCSS documentation on Gradient Colors, Gradient Directions, and Background Clipping.

I hope you found this article helpful, and may the gradient force be with you. 🤓

Comments (0)