Webflow Mix-blend modes are now here.
When would I use a mix-blend mode?
Blending mode's are great for controlling how an element's content blends with the content beneath it. This interesting control gives a design a lot of room for creative experimentation and has the ability to make things feel 'deeper'. You might take a layout with overlapping pieces - (think about text, images, or images on top of other images). Black and white elements overlapping areas of colour is a very common use of this because the colour of the colour element can be applied to the dark or white tones of the black and white image. If you’re familiar with Photoshop, this effect works exactly the same. Cool! Now what?
How do I use this?
Mix-blend-mode is called ‘blending’ in Webflow and can be found in the style panel under the effects section. While you hover over the different options in the blending dropdown menu, you’ll see a live preview on the canvas showing how the selected elements will be affected. The live preview can help you find the ideal blending mode without having to click through each option.
Where can I find this feature?
In the Webflow designer, the right strip contains all the element properties. You'll find everything you'll need to set and control properties for padding, margin, size, typography, effects etc.. Within the lower section of the Effects panel you'll find a tab labled BLENDING, and it's here you'll find the blend modes. There are well over a dozen modes available but I find mostly I use 3 or 4, which are Multiply, Screen, Overlay, and for especially intense blending try the Colour Dodge. Designers were able to use mix-blend-modes before this announcement but it was much less easy and quick - one would need to create custom css within an embed element and insert the mix-blend-mode styles by appling the css to the element class. Super difficult, no, but it's so much easier now thanks to this update that I believe there will be much much more designs using this technique.
What are the best practices for using Blend-Modes?
Mixing typography and graphics can look great when a little blend mode is used, and can really jazz up a layout with smart colour choices and contrast.
Adobe Colour is an easy place to start looking at colour combinations, and aside from that try simply opening up your layout design tool, mine is Figma, and try overlapping elements that are set to different blend modes to see what looks interesting to you.
Of course perhaps the best way to get more comfortable with blend-modes is to see them in action, and for that you need to be reading, keeping up with art and design blogs, great website design blogs, etc..
I personally like and stalk SiteInspire, Awwwwwards, for typography I love Fonts In Use, Typewolf, and a million other great resources for designers to keep up with what's happening in design.
Stay great