Discover the best textmasking websites created by professional designers. Get inspired and start planning your perfect textmasking web design today!

Here’s an easy way to mask video in text.
No custom code required!
I’ve created this with a SVG file and added interaction to zoom in when scrolling.

Feel free to clone and use in your project.

--> Follow my profile for cool projects coming soon

Text Mask Video

Text Masked Video Scroll Animation

A simple custom code to mask image from text

clone and enjoy

Image into text (Text masking)

Image into text (Text Masking)

FRVNCOIS - Hero Text Mask

Interactive text mask

A simple test using blending modes to create a mask effect.

You can edit the text inside each section to change the mask. You can also add icons or other graphics inside it (just be careful to use only black/white elements).
This is just an experiment and the performance is really bad.

Simple text mask effect animated on scroll

A Simple text mask animation

An interactive clipping mask using a little code snippet within the page <head> tag. Try it out!

Text + Image Masking

Interactive Clipping Mask

Flowcraft

I wanted to recreate a text effect I saw on obaedakorani channels in Webflow.   Originally I thought I would use blending modes, but that wasn't possible, so used text-stroke css property.

Hope you like it and clone away :-)

WaterBaby

Water Baby

A collection of components for Webflow projects. From design patterns and no-code components to custom solutions built with JavaScript and CSS. Each one with its own video tutorial.

What you can find inside:
1) Three responsive flexbox design patterns
2) Quick and easy responsive solution to add borders to a grid
3) No code solution to build an immersive grid gallery experience
4) Infinite marquee with stop on hover, an attributes-only solution with a focus on motion accessibility
5) GSAP Trail Image effect, an attributes-only solution
6) Automatically open a dropdown on page load, an attributes-only solution

Wanna take a deeper look at what's inside?

Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Webflow Friendly Components

Popular masking effect on scroll.

It's not natively possible in Webflow, so be sure to check the Custom CSS embed element in the project and customise as you like.

Clip rect

Masking scroll effect using Clip-rect

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.

Discover textmasking websites built by the Webflow community

Discover textmasking websites built by the Webflow community