Live Text mask gradient

Hi All

Is there a way either with custom CSS or something to get live text to mask like the attached image. The image I’ve attached is created in photoshop. I can use a background image with a gradient overlay but I would like the live text to cut Through the gradient.

I don’t have a share link as I am just planning the site and moving the design from Adobe Muse.

Thanks in advance


Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])

[2]: Share a read-only link | Webflow University

1 Like

Take a look at this article: How To Do Knockout Text | CSS-Tricks - CSS-Tricks

It will require custom code to implement, but it’s not a very difficult job :slight_smile:

I’m getting this error with the text-fill-colour.

Here’s my share link Webflow - Room With A View

Just publish it and take a look, I think Webflow’s code hint just doesn’t re recognize that property… Should be fine on publish.

I’ve tried that.

Thats what I thought.

Post your published site link?

1 Like


Applying it like this worked:

Although it isn’t perfect, I think you need to play around with where the bg image is applied. What you are asking for is slightly different than the example in the css tricks article.

can’t you just choose a gradient on your textbox overlay?
choose background transparent and your gradient colors then direction.

or place a blank background with the gradient then your text on top of that with transparent background.