turning gradients into colors
Linear gradients and radial gradients in CSS have always been a source of much joy but unfortunately they are still not viable values for the color property. As a result it isn’t as easy to have linear or radial gradients as colors in themselves .
Regardless, the CSSbackground clip property enables us to easily make our gradient dreams come true since it enables us to clip the background such that it only covers the areas with text but for this to work the inherent color of the text should be turned off by simply setting the color property to transparent :
color:transparent
And there you have it. Now you can have a linear gradient as a color.
Finally in case you simply can not get the background-clip to work consider using the property -webkit-background-clip and setting it to text. Find a small pen below where you can keep exploring other beautiful gradients.
