HomeCategories

Coloring Texts With Gradients

This is an example of a heading with text in color gradient from left to right

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 🙂