DEV Community

Cover image for Beautify Your Text With CSS Gradients!
Pranshu Jha
Pranshu Jha

Posted on Edited on Originally published at pranshujha.hashnode.dev

Beautify Your Text With CSS Gradients!

Here's how to add a gradient to your text to create something like 👇

image.png

Although CSS lets you do all sorts of amazing things, unfortunately for some reason you can't just do

color: linear-gradient(#67b26f, #4ca2cd);
Enter fullscreen mode Exit fullscreen mode

To set gradient as the text color

But fret not! There's a small workaround that we can use.

Here's how -

  • Add the gradient as a background
  • Add a background clip with value as text
  • Set the color to transparent And you're done!

Here's the codepen:

Thanks for reading and Happy Hacking!

Top comments (0)