CSS Gradient Text

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

p {
  font-size: 46px;
  background-image: linear-gradient(
    45deg,
    #ff0a78,
    #5773ff
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe

Thanks For reading.