Control how stacked element colors blend with new blending mode

<p>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 <a href="<https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode>">mix-blend-mode CSS property</a> right into Webflow.</p><p>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!</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1400px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1400px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21d609OYh5SjZR1TM2vKxUCd9FGBQTSY864BNWhKjIQmAl8wU7mHSl3035ICrvLG-qc5AXafm2orFsz9Qr-Rh53g2VGbqBAvuiE97f0pnib0wDSPK32heOqHrX3y7p6mqj6qUJ4r6vs0h.png>" width="auto" height="auto" loading="auto" alt="The new blending controls are in the effects section of the style panel."></div><figcaption>The new blending controls are in the effects section of the style panel.</figcaption></figure><p>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.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:800px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="800px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21d5f7wmeDygx76YKVsxHq5IN60wA9uvNVN0Qv9tAPApVxp3LAXST2cie1Em9IZLIqzRb6kFHGUr5Jni9nFLoCzV6xIo1VllTITj39wg92SbuHPlfM1_YVDEzc0nW0c5Yn3qbgcSO7o.gif>" width="auto" height="auto" loading="auto" alt="Preview how different blending options affect the selected element as you work."></div><figcaption><em>Preview how different blending options affect the selected element as you work.</em></figcaption></figure><p><br></p>