DEV Community

Cover image for Gradient Text CSS

Posted on • Originally published at

Gradient Text CSS

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

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

Top comments (0)