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

Simple Snap Scroll interaction's with FullPage.js

Inspiration: https://bit.ly/3PgejOR
FullPage.js: https://alvarotrigo.com/fullPage/

Made with Client-first by Finsweet

Simple Snap Scroll with FullPage.js

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

I liked Bertani's horizontal scrolling website so much that I rebuilt it in Webflow.

Almost no custom code was used. I used just a little for insignificant stuff such as hiding the scrolling bars, adding the difference blend mode to the cursor, creating the countdown year effect in the preloader, and adding an outline to the text in the menu.

Clone it and have a look through it.

--

Want to learn how it was created? Subscribe to my YouTube channel (tutorials for this website coming soon) 👉 youtube.com/channel/UCgwvah4M6Anta4_5ACFiuRQ

__

• Do you need web design & development? Get in touch 👉 bjorn-encutescu.webflow.io/

• Follow my daily tips on Instagram 👉instagram.com/bjorn_encutescu/

Bertani Webflow Rebuild

Bertani Webflow Rebuild - Horizontal Scrolling Website

Just using one custom cursor per page? That's old hat. Using the powerful, simple CSS Clip property, you can use a variety of cursors in a single page, opening up the opportunity for some very unique and different explorations of what a cursor can be!

Wanna have your cursor change text between CMS elements? You can do that! How about cursors with different interactions? You can do that too! 

This project just scratches the surface of me exploring the use of multiple different cursors in-page, and I hope you guys in the community use this solution to make some super cool stuff 😎

Looking forward to hearing your thoughts in the comments!

Switch Cursors By Section Using CSS Clip! ✂️

Switch Custom Cursors In-Page Using CSS Clip ✂️

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

Finsweet

Check out the first colourful demo of the new Webflow properties introduced at No Code Conf!

Blending modes combined with playful interactions will allow you to literally feel the web reacting to you actions in the most spectacular and vivid manner.

This cloneable will help you understand the power of layering different blending modes and show how to use them with motion to create the perfect promotional page for some seriously jaw-dropping effect.

NCC experimental 1

NCC Blending Mode - Demo 1

Vanilla JS used to create stutter image effect on hover. Fun stuff. 🚀

hrsh22

Image Stutter Effect

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?

Second of Finsweet demos presents more complex techniques to achieve unexpected results with newly released blending mode and backdrop filter effects.

Combine separate channels into full colour photo; magically hide and show objects simultaneously using nothing but solid coloured divs; play with stacking various blend modes on top of each other; see the mind-bending inception of inversion of already inverted objects; use interactive colour changer for your elements, that does not even touch the elements themselves; create fun colour-restoring games; reveal the magical world invisible to naked eye with your blend-empowered cursor.

NCC experimental 2

NCC Blending Mode - Demo 2

I started a series with footers collections. This is the first cloneable. I want to make 10 footers designs inspired by the best websites on the market. 

For the social buttons, I used mix blend "difference" and you will find all the settings in the embed element from this project.

This first design was inspired by Cuberto Agency website

For the settings: Make sure you have selected class Body (all-pages), go to the typography panel and apply 1vw for it. Enjoy!

Feel free to use this template in any of your projects!

Much more will come!

I hope you like it! :)

-> Facebook - https://www.facebook.com/sivadvertising
-> Instagram - https://www.instagram.com/sivmedia/
-> Dribbble - https://dribbble.com/SIVMEDIA
-> Linkedin - https://www.linkedin.com/company/13021581
-> Website - https://www.sivmedia.com/

Footer Collection #1

Footer #1

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

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]

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.

Discover mixblendmode websites built by the Webflow community

Discover mixblendmode websites built by the Webflow community