If you want to enhance your website's typography, CSS gradient text is the best way to add color and style. The gradient text gives a modern and dynamic appearance to the website
In this tutorial, I'll show you how to create a gradient effect on text using simple CSS.
Let gets started
How to add gradient text in CSS
1. Add a gradient background
First, you create the gradient using the background-image property.
background-image: linear-gradient(45deg,#ff0a78,#5773ff);2. Use Background Clip and Text Fill
Then, ensure that your gradient only works on the text but not on the full background. To do this, you can use the background-clip property and text-fill-color:
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;The -webkit- is mainly used for browser compatibility in older versions of WebKit-based browsers like Safari and Chrome. Here’s why
WebKit is a browser engine that was originally developed for browsers like
Safari and older versions of Chrome. Some CSS properties, especially newer
ones like background-clip: text or text-fill-color, are not supported if you
apply this without the -webkit- prefix in these browsers.
Complete CSS Gradient Text Example
HTML
<p>This is gradient text</p> |
| CSS gradient text |
CSS
p {
font-size: 46px;
background-image: linear-gradient(45deg,#ff0a78,#5773ff);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} |
| CSS gradient text |
The CSS gradient text is good to have a modern and eye-catching effect on
headings or key content.
Articles you may found Useful
If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe
Thanks For reading.
