Pranshu Jha
Pranshu's Blog

Pranshu's Blog

Beautify Your Text With CSS Gradients!

Beautify Your Text With CSS Gradients!

Pranshu Jha's photo
Pranshu Jha
ยทDec 17, 2021ยท

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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);

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 code:

.gradient-text {
  background: linear-gradient(to right, #67b26f, #4ca2cd);
  background-clip: text;
  color: transparent;
}

Thanks for reading and Happy Hacking!

ย 
Share this