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
- background: -webkit-linear-gradient(...) Provide a gradient background for text elements.
- webkit-text-fill-color: transparent Fill the text with a transparent color.
- 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.
Post your comments / questions
Recent Article
- How to enable Search Feature in Django admin?
- How to check PAN-Aadhaar is Linked or NOT?
- How to customize pagination for django admin?
- How to fix HAXM is not installed |in Android Studio
- How to fix CMOS Checksum Error in Computer or Laptop | SOLVED
- Reactivating windows after a Hardware change on PC or Laptop
- FIXED: Windows reported that the hardware of your device has changed. Error code :0xc004F211
- "redirect" is not defined pylance("reportUndefinedVariable)
Related Article