Is it possible to apply a drop-shadow effect that follows the free form of a PNG image with a transparent background in Webflow?

Yes, but Webflow’s default box-shadow effect applies to the bounding box of an image, not its transparent edges. Here are your options:

1. Use CSS filter: drop-shadow()

• Webflow’s box-shadow only works on rectangular elements, but drop-shadow() follows the non-transparent parts of a PNG.
• Add the following inside Custom Code (Project Settings > Custom Code > Inside <style> tags):
• img { filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5)); }
• Adjust values (10px 10px 10px rgba(0, 0, 0, 0.5)) for position, blur, and color.

2. Apply the Drop-Shadow via Webflow Embed

• If you only need the effect on a specific image, use an Embed block and insert:
• <img src="YOUR-IMAGE-URL.png" style="filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));">
• Replace "YOUR-IMAGE-URL.png" with the actual link to your PNG file.

3. Create the Shadow in Photoshop or Figma

• If CSS doesn’t provide the desired control, add the shadow directly in your design tool, then export as a transparent PNG.
• This ensures a more customized and natural look but makes future edits harder.

4. Use a Div Block + Background Image Trick

• Wrap the PNG inside a div and set it as a background image.
• Apply Webflow's box-shadow to the div—this doesn’t follow the PNG shape perfectly but may be an alternative.

Summary

To add a shadow that follows the shape of a transparent PNG, use filter: drop-shadow() in Custom Code or an Embed. If precision is crucial, design it in Photoshop/Figma or consider SVG with an inline shadow filter (if applicable).