Create blurring and color effects with backdrop filters

<p>Backdrop filters allow you to create blurring and color shifting effects to the area behind an element. In other words, we’re bringing the <a href="<https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter>">backdrop-filter CSS property</a> directly into Webflow.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1600px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1600px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21d605xJAb1zXq9arlT0o-rV4MvHK32nSOLr4DRVgiEuctkhj-dyzh768FuRJ3QVaNDSNmAksFl6lhul6wUda_ePgOqYwKnmGXlRuizadrxNZd88oj9ROsbOPltu4UdiqTmeEmqVzWAxi.jpeg>" width="auto" height="auto" loading="auto" alt="Backdrop filters brings the backdrop-filter CSS property into Webflow"></div><figcaption>Backdrop filters brings the backdrop-filter CSS property into Webflow.</figcaption></figure><p>You can find backdrop filters in the style panel, under the effects section. As you hover over the different options in the backdrop filters dropdown menu, you’ll see a live preview on the canvas showing how the selected elements will be affected.</p><p><strong>Note on browser support:</strong> backdrop filters are only <a href="<https://caniuse.com/?search=backdrop-filter>">supported in 70% of browsers</a>, so there’s no guarantee all site visitors will see these effects correctly. If you’re using Firefox, you may not see backdrop filters preview in the Designer. This feature will stay in beta until we see broader browser support — but have fun and go wild in the meantime!<br></p>