Text with gradient fill

User 463058 Photo


Ambassador
1,083 posts

In this case it's a linear gradient, but you can also use radial gradients or images or whatever you can put in the background.

I came across this technique recently when I saw it on a website. I copied the bit that was of interest and slightly modified the text. The "before" image is what it looks like with regular white text. The "after" image has the following styling.

-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:transparent;
Attachments:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.