Discover the best mask websites created by professional designers. Get inspired and start planning your perfect mask 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

This is a collection of four text reveal animations. Our personal favorite is the one with the circle mask. Clone it to your collection and feel free to use it for your next projects.

Text Reveal Animations

FRVNCOIS - Hero Text Mask

Interactive text mask

A fixed background image that is revealed by mouse hover all over the section

https://www.tiny-resources.com/elements/hover-to-reveal-mask

Hover Reveal Mask

Hover to reveal Mask

Web's Dandy Project

Text Mask

Love to share a trick to place a transparent text over a background or an image and then apply animation. This is an alternative to text clipping effect or say image masking effect.

This one is done using CSS's Mix Blend Mode and then we can animate the text without any issue. All the options and styling is available in Webflow, without custom code.

This is my first ever submission, I'd love some feedback.

Clip Text and Animate Trick by Abi Rana

Easy Clip Text with Background and Animate Trick / Mask Image Trick

A simple text mask. The text here is editable and the image is applied as a background to the text. 

In my example I have set the image to be fixed, as you scroll, the image itself remains fixed within the mask.

Feel free to clone, adapt and use :)

Text used as image mask

A project for the webflow party challenge
https://webflow-party.circle.so/c/the-party/challenge-2

I used
Finsweet client first system
Finsweet attributes slider

Original project
https://f1fan.webflow.io/

What’s the difference?
- Free 3D asset for the cars
- The fonts I used formula condensed and extended from https://pangrampangram.com which are free for personal projects but you can download them. I used Bebas neue and Orbitron from google fonts as free alternatives.

Big mask text
https://thedesignersfoundry.com/super
A premium font and converted them to svg.

Process on youtube
1. Design https://youtu.be/ANReasCcAIU
2. Build https://youtu.be/LtGDkW0v2UU

Unresolved issues:
- For the slider, I enabled keyboard navigation. But, the text animation does not work.
- Active slider nav item will not show if you navigate to an item outside of your screen with the arrow keys.
- I tried to use a CMS collection on a separate page but the nav item does not show. 

F1FAN-clone

f1fan-clone

Our client was having trouble publishing their digital magazine online. Using the Webflow CMS, we cut their time-to-publish in half, requiring fewer employees to be involved in the process.

Includes email marketing integration, animated gradient text masking, and fully-responsive layout

Pathfinder

Client First Magazine

I recently experienced the best day of my life - my wedding day. As a web designer, I knew I wanted to do better than the traditional "Knot.com" website with basic template design.

I build this site using a gradient video and clipping masks. So, the text is not real, it is all an image, but I made them in Canva, so it wouldn't be difficult to change.

Also, I wasn't worried about SEO for this site because only the people we send our invitations to will see it through our QR code.

Braden and Mindy

The Perfect Wedding

Developed Shopify theme using Webflow. 
See actual Shopify store : - innolifecare.com

Designed by : Honey <div>
www.honeydiv.com

Discover mask websites built by the Webflow community

Discover mask websites built by the Webflow community