Gradient Headers with Tailwind
Playing
01. Gradient Headers with Tailwind

Episodes

0%
Your progress
  • Total: 4m
  • Played: 0m
  • Remaining: 4m
Join or sign in to track your progress

Transcript

00:00
In this snippet, I'm going to show you how to create gradient text with Tailwind
00:04
and this works particularly well with nice headers like this. That's pretty much what the end result is going to look like. Let's clear this out and start doing this from scratch. Okay, so we're using Tailwind Play here,
00:16
which is a playground for working with Tailwind. By default, we'll see all this stuff here. So the first thing that we're going to do is, of course, just get rid of all of that.
00:25
Let's just start things out with a div inside of here. I'm going to give this a little bit of margin just to pull it away from the edges. And we're going to create a header in here. So let's say a beautiful gradient header,
00:39
which, of course, at the moment is not the case. It's just some text on the page. Now, what we want to do with this is add a background to this header, a gradient background to this header.
00:51
Now, we can do that really easily within Tailwind using the utilities that are available for us. So, for example, I could say background gradient to right, or you can choose any direction you want.
01:02
And then we just use the from set of utilities to choose the colors. So I'm going to say from indigo, and let's say 400. And let's say via purple, and let's maybe bump that up a little bit to 500. And then say to indigo, and let's again bump that up to something like 600.
01:21
So that's pretty much the gradient that we want. But, of course, we don't want this to apply to the background. We want it to apply to the actual text. Now, we can't specifically do this with Tailwind.
01:32
We're going to have to create our utility using background clip to achieve this. And I've got the documentation up for background clip here, and we'll take a look at that in just a second.
01:41
Let's finish up with the rest of the styling of the header. So let's go and just give this a little bit of padding and say text 8XL. Make that quite big. Let's go and set the text to center here.
01:54
And I think that's just about it. Maybe we could bump up the font to bold. Great. So effectively, what we want to do is take the background,
02:02
this gradient of the background of the header, and clip it to the text. So to do this, we're going to come over to our CSS just here, and we're going to go and create out a text gradient utility, if I can spell that correctly.
02:17
So what we want to do is not just put this on the page. We want to bucket this under the Tailwind utilities. So to do that, we can use layer and place that directly inside of there. And that's now become a Tailwind utility.
02:32
If you need to find out any more information about this, you can jump over to the Tailwind documentation. You can see here, use the layer directive to tell Tailwind which bucket a set of custom styles belongs to.
02:43
So you can add them to the base component, or in our case, utilities. So now we want to talk about background clip. So the background clip CSS property sets whether an element's background extends underneath this border box, padding box, or content box.
02:57
So effectively, what we can do with this is for the text gradient, we can say background clip and set that to text. Now let's just try this out. If we head back over to our HTML just before the gradient that we set here,
03:12
let's add in the text gradient. And you can see that because we've added that to Tailwind's utilities, that's picked it up really nicely. At the moment, it doesn't quite work.
03:20
This has worked, but because this text has a color to it, it's not quite going to work. So what we can do with this is use WebKit, text fill color, and set that to transparent.
03:34
And there we go. So effectively, what that's done is got rid of the fill color of the text. The background clip has now pulled the background clip has now pulled the background onto the text
03:45
rather than show this in the actual box surrounding the header itself. And it's layered it on to the header really nicely. And that's pretty much it. So this is going to work not just for headers but any text at all.
03:57
So even if you were to bump this right down to the smaller size, you can see that still applies. And of course, you can play around with the colors here as well as the direction.
04:06
So for example, if you wanted this to go from left to right, you could do that as well, or to left from right. You can do that as well, as well as changing around the actual gradient itself using from, via, and to.

Episode summary

In this episode, we're diving into how to create eye-catching gradient text headers using Tailwind CSS. We kick things off in Tailwind Play, clearing out the default setup so we're starting from scratch. Then, we add a header and start styling it up with some padding, a big font size, and bold text.

Next up, we use Tailwind's built-in gradient utilities (bg-gradient-to-right, from-indigo-400, via-purple-500, to-indigo-600, etc.)—but quickly notice that just throwing those on our header only sets a background gradient, not actual gradient text. This is where a little CSS magic comes in! Tailwind doesn't yet offer a utility to clip the background to text by default, so we add a custom utility using the background-clip: text property (via Tailwind's @layer utilities feature), and combine it with -webkit-text-fill-color: transparent so the gradient shows through the text itself.

Once that's in place, boom: we've got a gorgeous gradient header. And the best part? This trick works with any text size and any gradient direction or color combo you like—just tweak the Tailwind classes. It's a super clean way to make your headings (or any text) really pop!

Episode discussion

No comments, yet. Be the first!