CSS | Gradient Text

There are three different CSS properties required to add a gradient overlay to a text.

1. background-image: <gradient>
2. background-clip: text
3. text-fill-color: transparent

background-image: <gradient>
<gradient> will replace with any gradient style which your browser can support.

background-clip: text
This will hide gradient and render only the background where there's text.

text-fill-color: transparent
It will remove the fill from the text, making the gradient visible again.

h1 {
    background-color: #000;
    background-image: linear-gradient(#FFF, #000);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

In the above example, background-color and background-size are added for deals with fallbacks. background-size: 100% is used if the gradient is not applied to all over the text and background-color: #000 is used because Gradients as background images clipped on top of the text aren't supported by all browsers.