Knockout text on video (clipped text on video)

Design help Custom code
1

Hi guys,

I’d like to use text to clip/mask a background video.

I accomplished something using a SVG mask (made on Figma and imported as SVG). I’ve also tried different custom codes as well, but with no success. I’ve tried:

  • mix-blend-mode: screen
  • webkit-background-clip: text;
  • webkit-text-fill-color: transparent;

you can see all my failures here below. Every page represent a new try. The page “Test 5” is the best result I accomplished.

https://preview.webflow.com/preview/maga-maison?utm_medium=preview_link&utm_source=designer&utm_content=maga-maison&preview=f346cd2b9dad9c979cc5ef42c9cd307d&pageId=5eecde2a266234cad96aa02e&mode=preview

As you see, it’s not the most elegant solution, also is not responsive at all :smile: I’ve seen lots of examples outside Webflow, using CSS, but I don’t know how to translate it into Webflow.

Thank you so much guys! I hope you can help :wink:
Nick

1 Like
2

looking for the same feature