This paragraph is in a color gradient from top to bottom.
CSS does not allow using gradient values in the `color` property. But with simple trick we can achieve the
same effect by using a combination of `background` , `background-clip`, and `color:transparent` property. The
concept here is to apply the required gradient color to the `background` property and then use
`background-clip` to limit the background only to the `text` and finally use `color:transparent` to make the
text color transparent and let the background gradient take over.
Here's the simple code -
background: linear-gradient(to right, #ff8a00, #e52e71);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
Was this CSS trick helpful? let me know your feedback in the comments below.
- Ayush 🙂