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
- Fix-Gradient effect turning to gray in after effects
- How to blur an image in python?
- ModuleNotFoundError: No module named 'whois' in Python GoviralHost Without Terminal
- How to Convert Image to Pencil Sketch in Python?
- AttributeError: module 'urllib' has no attribute 'request' - Python
- How to Extract audio from video files using python?
- PermissionError: [Errno 13] Permission denied: 'shampoo_sales.csv' - Python
- [WinError 145] The directory is not empty: 'FolderPath' - Python
Related Article