how to add gradient to text using CSS

How to Add Gradient to Text Using CSS?

To add a gradient to text using CSS, we style the text with three different CSS properties:

background-image: linear-gradient(to right, #30CFD0 0%, #330867 100%);
background-clip: text
text-fill-color: transparent

The HTML code an example:

<h1 class="text-gradient">HELLO</h1>

Make a gradient as the background.

In this example, we’ll use a linear gradient, which can be created as follows:

.text-gradient {
    background-image: linear-gradient(to right, #30CFD0 0%, #330867 100%);
}

Set background-size: 100% to make the gradient cover the entire width and height of your text field, as I did in this example.

.text-gradient {

  /* Create the gradient. */
  background-image: linear-gradient(to right, #30CFD0 0%, #330867 100%);
  
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

}

Clipping the background to the text

The gradient is now in the background, and the text is displayed on top of it.

The next step is to specify background-clip: text;. The background will only be rendered where there is text.

When you test this, your gradient will appear to have vanished completely, because the text is still rendered and the gradient layer is hidden underneath.

As a result, we must set the text-fill-color :transparent;. It will remove the fill from the text, revealing the gradient once more.

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;

The final result on the gradient to text using CSS

In the following example, you can see the final result. You can read more about adding gradients to text using CSS or edit the code on codepen.

add gradient to text using CSS

Add comment