Designer
CMS
Ecommerce
Interactions
Memberships
Editor
Logic
SEO
Hosting
Security
Overview
Libraries
Apps
Hire a Certified Partner
Templates
Made in Webflow
Learn
Community
Ebooks
Forum
Blog
Support
LoginContact Sales
Get started — it's free
Made in Webflow

Knockout Text with Video Background

Tony Seets's avatar
Tony Seets
Clone in Webflow245
site profile thumbnail
Open in Webflow
Open live site
A quick demonstration of how to "clip" a background video to text using the "screen" blending mode. I've also attached a basic demonstration using an image with transparency to cover part of a background video. *This isn't without limitations.
Open in Webflow
Open live site
knockouttext
text
clip
clippingmask
textfill
videobackground
textmasking

More sites by Tony Seets

See profile
Smooth Tab Content Crossfade
76
319
Flow Maestro
66
Tab Link-ception
20
98

Similar sites

author avatar
Slanted Edges with CSS
35
125
Noah Raskin
author avatar
background-clip
13
39
Philipp Roth
author avatar
Text Fill
16
46
Paul Herzog
author avatar
Moving text with clipped Background
51
89
FlowRocket
author avatar
Easy Clip Text with Background and Animate Trick / Mask Image Trick
19
57
Abi Rana
author avatar
Clipped Text with Blending modes | Webflow University
132
318
Webflow University
Explore
  • Dashboard
  • Marketplace
  • Hire designers
Learn & get help
  • Support
  • University
  • Courses
  • Blog
  • Ebooks
  • Forum
  • Community
  • Developers
  • Wishlist
  • Status
Company
  • About
  • Careers
  • Sitemap
  • Become an Affiliate
Terms & policy
  • Terms of Service
  • Privacy policy
  • Cookie policy
  • Cookie preferences
Social
Social
Explore
  • Dashboard
  • Marketplace
  • Hire designers
Learn & get help
  • Support
  • University
  • Courses
  • Blog
  • Ebooks
  • Forum
  • Community
  • Developers
  • Wishlist
  • Status
Company
  • About
  • Careers
  • Sitemap
  • Become an Affiliate
Terms & policy
  • Terms of Service
  • Privacy policy
  • Cookie policy
  • Cookie preferences
Social
Social