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.

 

ChristianKovats
ChristianKovats

Christian Kovats is a London-based web designer who loves crafting innovative and user-friendly interfaces. His passion for design is only rivaled by his love for nature and hiking, often drawing inspiration from his treks through the diverse landscapes of the UK. Outside of work, Christian enjoys spending quality time with his wife and 4-year-old son. A seasoned lucid dreamer, he also spends time exploring the intricate world of dream interpretation, reflecting his ever-curious and creative mind.

ChristianKovats

Leave a reply

You must be logged in to post a comment.