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
- ValueError:All arrays must be of the same length - Python
- Check hostname requires server hostname - SOLVED
- How to restrict access to the page Access only for logged user in Django
- Migration admin.0001_initial is applied before its dependency admin.0001_initial on database default
- Add or change a related_name argument to the definition for 'auth.User.groups' or 'DriverUser.groups'. -Django ERROR
- Addition of two numbers in django python
- The request was aborted: Could not create SSL/TLS secure channel -Error in Asp.net
- FieldError: Cannot resolve keyword 'id' into field in Django project
Related Article