Drop shadow filters
Add depth and dimension to designs using the drop-shadow() CSS function, now available as an effect in the Style panel.
<p id="">We’re excited to announce the addition of drop shadows to the Style panel, giving you more control over the depth and dimension of your designs without the need for custom CSS.</p><h2 id="">Add drop shadows with ease</h2><p id="">You can now apply and customize drop shadows directly from the <strong id="">Style panel > Effects > Filters</strong>. This CSS function allows you to create shadows that conform to the shape of your elements, perfect for images, complex shapes, and more.</p><figure id="" class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1280px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1280px"><div id=""><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/66bd0e840ddb8e8c475d876266bd0e0ede1635add4777d3eSlashUpdates1280x720%25E2%2580%2593drop-shadow.jpeg>" loading="lazy" alt="A user creating an airplane-shaped drop shadow beneath an airplane icon, using the drop shadow filter property " width="auto" height="auto" id=""></div></figure><h3 id=""><strong id="">Why drop shadows?</strong> </h3><p id="">Unlike box shadows, drop shadows follow the exact contours of your elements. This means:</p><ul id=""><li id="">Perfect shadows for transparent images and logos</li><li id="">Realistic depth effects for irregularly shaped elements</li><li id="">More natural-looking emphasis for your design components</li></ul><h3 id=""><strong id="">Customize drop shadows</strong></h3><p id="">The new drop shadow filter includes a few properties you can control to get your effect looking just right:</p><ul id=""><li id=""><strong id="">X and Y offsets</strong>: control the position of your shadow</li><li id=""><strong id="">Blur</strong>: adjust the softness of the shadow's edges</li><li id=""><strong id="">Color</strong>: choose your shadow color and opacity with the color picker</li></ul><figure id="" class="w-richtext-figure-type-video w-richtext-align-fullwidth" style="padding-bottom:100%" data-rt-type="video" data-rt-align="fullwidth" data-rt-max-width="" data-rt-max-height="100%" data-rt-dimensions="240:240" data-page-url="<https://player.vimeo.com/video/999221269?badge=0&autopause=0&playerid=0&app_id=58479>"><div id=""><iframe allowfullscreen="true" frameborder="0" scrolling="no" src="<https://player.vimeo.com/video/999221269>" title="Drop shadows filter and backdrop-filter support"></iframe></div></figure><h3 id=""><strong id="">Adjust across breakpoints</strong> </h3><p id="">You can adjust your drop shadow settings at different breakpoints to ensure your design looks great on all devices.</p><h3 id=""><strong id="">Animate with variables</strong> </h3><p id="">To animate a drop shadow:</p><ol id=""><li id="">In the Style panel, bind variables to the filter’s properties: <strong id="">x and y offsets</strong>, <strong id="">blur</strong>, and <strong id="">color</strong>.</li><li id="">In the Interactions panel, create a new animation that includes a “Set variable value” action, and update your drop shadow variables accordingly. This creates a smooth, dynamic drop shadow animation!</li></ol><h3 id="">Try out drop shadows today</h3><p id="">We're thrilled to bring this highly requested feature to the Webflow Designer. Whether you're highlighting a product image, adding depth to a button, or creating a subtle lift effect for text, drop shadows offer a new level of polish to your designs.</p><p id="">Ready to add some depth to your project? Head to the Webflow Designer and start experimenting with drop shadows today!</p>
