Gradient Text Color in Css

Ever wondered if you can use gradient as text color same way we use gradient as our background color?

Yes we can, and that’s very simple to accomplish.

So this tutorial is just going to show us how we can achieve that

Html

<div class="polaroid">
    <h1>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae, quia.</h1>
</div>

CSS

we would add a little styling to the parent div with a class name of "polaroid" so that we can see the area where we are working on.

.polaroid {
  width: 300px;
  height: 300px;
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  background-color: #395103;
  border: 2px solid green;
  -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 4px 6px 6px black;
}

Result

We can clearly see that the default text color of black is applied to the text.

Next is to add the property to either the text parent container or the text tag (heading in this case) directly.

we will use the gradient as text color by adding it on the heading tag as shown below.

CSS

h1 {
  font-size: 30px;
  background: -webkit-linear-gradient(orangered, orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

After adding the CSS code above, the output on the browser is shown on the image below.

And that is how simple it is to use gradient as text color in our website. You can check how simple it is to add background overlay here

The gradient direction work the same way as background linear gradient, you can find more about it here here

Hopefully you understand the code and if you encounter a bug, just try and go through your CSS again to make sure we are all on the same page.