Gradient text-CSS examples

In this tutorial i will show you how to fill a text with a gradient color using CSS. The effect css will provide a gradient color for the text.

HTML CODE:

<p class="gradient-text">
    Gradient text
</p>

CSS CODE:

.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

Description

1. background: -webkit-linear-gradient(...) Provide a gradient background for text elements.
2. webkit-text-fill-color: transparent Fill the text with a transparent color.
3. webkit-background-clip: text Use a text clip background to fill the text with a gradient background as the color.

From the below video you can learn how to apply gradient text effect for heading. It will looks beautify your works.