Feature
Designer

Control how stacked element colors blend with new blending mode

Control how stacked element colors blend together and preview changes live with a new blending mode in the style panel.

Feature
Web Design

Control how stacked element colors blend with new blending mode

Control how stacked element colors blend together and preview changes live with a new blending mode in the style panel.

Feature
Designer

Control how stacked element colors blend with new blending mode

Control how stacked element colors blend together and preview changes live with a new blending mode in the style panel.

Now you can control how stacked element colors blend together and preview changes live with a new blending mode in the style panel — which brings the mix-blend-mode CSS property right into Webflow.

Blending mode controls how an element's content blends with the content of the element's parent and the element's background, which gives you a fun new set of options when building layouts with overlapping pieces. If you’re familiar with Photoshop, this new effect works just like blend mode — imagine that!

The new blending controls are in the effects section of the style panel.
The new blending controls are in the effects section of the style panel.

Mix-blend-mode is called ‘blending’ in Webflow and is discoverable in the style panel under the effects section (see graphic above for a visual guide). As 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 will help you quickly find your preferred blending mode without having to click through each option.

Preview how different blending options affect the selected element as you work.
Preview how different blending options affect the selected element as you work.


Launched on
November 17, 2021
Category
Web Design