CSS > -webkit-background-clip

-webkit-background-clip - amazing CSS propertirs. With -webkit-background-clip:text set, the background is painted within (clipped to) the foreground text.

That means web developers could combine -webkit-background-clip:text & color:transparent these two properties to create amazing text effect. Such as the following gradient text.

Awesome

Style setting

Here comes the example style.

<style> .gradient-text { color: transparent; -webkit-background-clip: text; background-image: linear-gradient(to right bottom, #3494e6, #ec6ead); } </style>