CSS gradient text color

Using gradients we can create smooth progressive color transitions. We mostly use CSS gradients for backgrounds, but it is possible to add a gradient color transition to text as well. However, it requires some extra steps to achieve it.

We have discussed CSS gradients in more details in this article, but in a nutshell, we use this with the background-image property.

Let’s start with this basic set up. I have this very simple HTML with a heading text:

<div class="content">
<h1>This is an H1 heading text!</h1>
</div>

and some basic styling

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Roboto', sans-serif;
background-color: #f9f5fa;
color: #3b2a82;
padding: 10px;
min-height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}

.content h1 {
font-size: 5rem;
font-weight: 900;
}

Because we use the background-image property to define the gradient, we need some extra properties to make the gradient work with text.

First, let’s define a linear gradient:

.content h1 {
font-size: 5rem;
font-weight: 900;
background-image: linear-gradient(45deg, #7013a9, #ff2f66);
}

This will only add a background to the text. I also added 45deg for the direction so that the transition goes from left to right, but we could have just as well use the “to right” keyword.

.content h1 {
font-size: 5rem;
font-weight: 900;
background-image: linear-gradient(to right, #7013a9, #ff2f66);
}

So, it looks nice so far, but this is not what we want. The gradient is behind the text. We want it on top of it. To do that, we need a little trick. We need to use the “background-clip” property.

.content h1 {
font-size: 5rem;
font-weight: 900;
background-image: linear-gradient(to right, #7013a9, #ff2f66);
background-clip: text;
-webkit-background-clip: text;
}

We also need to use vendor prefixes here to make sure it works in all browsers.

Right, now it seems like it didn’t work. But what happens is that the CSS background-clip property defines how far the background extends into the element. In short, it’s still there, but it’s clipped by the text element and since we still render the original color of the text element, it looks like it didn’t work. So we have to figure out a way to reset the base text color to transparent and this way we will have the gradient color on the text.

We can do that with the “text-fill-color” property.

.content h1 {
font-size: 5rem;
font-weight: 900;
background-image: linear-gradient(to right, #7013a9, #ff2f66);
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}

Again we have to use vendor prefix.

The text-fill-color CSS property sets the fill color of a character. It’s basically the same as the “color” property, but it has a higher specificity if they have different values. That is why in this case the gradient color is now visible on the text.