Streaming live at 10am (PST)

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

Jason


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

[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link

Take a look at this article: https://css-tricks.com/how-to-do-knockout-text/

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 https://preview.webflow.com/preview/room-with-a-view?utm_medium=preview_link&utm_source=dashboard&utm_content=room-with-a-view&preview=81e076d5d81acd5c36d9f47201be986e&mode=preview

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?

https://room-with-a-view.webflow.io/

Thanks

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.