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

I couldn't contain my excitement for the release of native blend modes in Webflow on NoCodeConf 2021, so I did this quick little project to show a bit of what you can do with it. 

Background videos + multiply image for a cool double exposition effect is definitely on of the things I wanted to try!

Feel free to clone it and have some fun!

Bilbao - Webflow blend modes sample

Rebuild of https://wickret.cuberto.com/ hero

This cloneable is for learning purposes only. I do not own the rights to this design and content.

Wickret

Wickret Hero

Webflow University

This cloneable project shows blending mode, which is a great way to clip text clip out black and white content (such as text, borders, PNGs, SVGs, and more), so your content becomes a window to your background elements (this could be both a image or a video).

View the lesson here: https://university.webflow.com/lesson/clip-content-using-blending-modes

Blend modes overlay

Clipped Text with Blending modes | Webflow University

To announce the new blending mode and backdrop filter features, Webflow reached out asking me to design and develop three eye-catching builds in two days. I quickly asked two of my friends, Shelby & Corey, for help creating the designs. This is one of the concepts that was chosen.

Project Team
Corey, https://dribbble.com/coreyschneiderdesign
Shelby, https://dribbble.com/shelbybuquet
Timothy, https://dribbble.com/tricks

Will it blend?

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

This demo showcases a blend mode button animation for a Lightbox link.

Inspired by: https://nultime.com/

WebDev for You - Interaction #160

WebDev For You - Interaction #160

Blend modes meet animation to create a neon effect. 

Built *before* Webflow announced blend modes would be accessible from inside the Webflow UI...!

The blur filter and mix-blend-modes were used to create the neon effect, with a background gradient creating the colour change across the screen. Animating the infinity shape was tricky, and definitely would have been easier with SVG 😅

Infinite Neon

Infinite neon with blending modes and Webflow interactions

With the new blending mode finally in Webflow, you can take your projects to the next level and build your custom cursors completely within Webflow.

Custom cursor with blend mode [Cloneable]

Custom cursor with blend mode [cloneable]

Change object colors in realtime. Presets and Random Colors included. Based on SVG Overlays & Blend Modes. 100% working inside Webflow. 

This was originally build in Flash many years ago and got revamped and turned into a working HTML5 version using SVG path elements.

DDR Lackiertool

Interactive SVG Painter (Color Changer)

Stellifi is a venture capital that invests in an ecosystem to better build, maintain, and operate real estate assets through technology, while leveraging a rapidly growing real estate platform and network.

I had the pleasure to design a simple and clean experience and also build this project in Webflow.

Stellifi Venture Capital

Stellifi - Venture Capital

Hi everyone!
I crafted this cut-off effect for an upcoming project and thought I should share it with the community.

The window circle is animated using native Webflow interactions to follow the mouse movement through the viewport.
Using CSS3 Blending Modes I managed to make the background behind visible. In this case, I used a video background but it can be replaced by a static image or a gif. (Keep the same classes and replace the video bg for a regular div, then add the background image in the styling panel).

The Green version contains the demo content and some cosmetic styling, but I also included a "Warm/Clean" version (see footer) that contains just the effect so it's easier to implement on your own projects.

I encourage you to play around with backgrounds in both the Mask-BG and the Animated-BG to achieve some mesmerizing visuals.

A like is very appreciated if you clone and enjoy this work ♥️
Have fun building!

Cursor cut-off with Background Video

Becoming wise through coaching, teaching and guidance within your own workspace.

Discover blendmode websites built by the Webflow community

Discover blendmode websites built by the Webflow community