Gradient Text CSS

.gradient-text {
   background-image: linear-gradient(to right, #833ab4, #fd1d1d,#fcb045);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

In the above example, we apply the linear-gradient() function to the background-image property, and then set the background-clip property to text and the text-fill-color property to transparent. This tells the browser to apply the gradient to the text itself, and make the text color transparent so that the gradient shows through.

You can actually create gradient text in HTML in several other ways.

Check out the full article about gradient text