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 🙂