CSS3 Text Gradient

Rishabh

• 669804
• 17
• 1

CSS3 text gradients that is only supported by Webkit based browsers like Chrome and Safari. I have used 2 different methods.

First one is Webkit specific value for background-clip property, i.e., text. It clips the background to the text. It's used along with another Webkit specific property -webkit-text-fill-color that makes the text transparent and the background gradient shows.

Second method is another Webkit property -webkit-mask-image to mask the text with the gradient.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room