Live Text mask gradient

jasonjkd · August 10, 2019, 3:32pm

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

Jason

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

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

sam-g · August 10, 2019, 3:34pm

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

jasonjkd · August 10, 2019, 4:48pm

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

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

sam-g · August 10, 2019, 6:08pm

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.

jasonjkd · August 10, 2019, 6:21pm

I’ve tried that.

Thats what I thought.

sam-g · August 10, 2019, 6:34pm

Post your published site link?

jasonjkd · August 10, 2019, 6:45pm

Thanks

sam-g · August 10, 2019, 9:43pm

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.

TheCat · August 23, 2019, 4:02pm

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.