DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

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

Posted on • Updated 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)

We are hiring! Do you want to be our Senior Platform Engineer? Are you capable of chipping in across sysadmin, ops, and site reliability work, while supporting the open source stack that runs DEV and other communities?

This role might just be for you!

Apply now