Is it possible to apply a drop-shadow effect that follows the free form of a PNG image with a transparent background in Webflow?
TL;DR
- Webflow drop shadows apply to the PNG's bounding box, not its transparent shape.
- To get a shadow that matches the image contour, either embed it into the image using an editor like Photoshop or use custom SVG filters with code.
Yes, you can apply a drop shadow to a PNG image with a transparent background in Webflow, but the shadow will always follow the image’s bounding box, not its free-form transparency shape.
1. How Drop Shadows Work in Webflow
- The CSS
box-shadowproperty, which Webflow uses for shadows, applies to the bounding box of the element, not the visible shape. - This means shadows are applied to the rectangle around the PNG, even if parts of it are fully transparent.
2. Alternative: Using SVG Filters (Not Native in Webflow)
- To create a shadow that follows the actual contours of the image, you'd need a custom SVG filter using
feDropShadow. - Webflow does not support SVG filters natively in the Designer. You’d need to:
- Export your PNG as an SVG with embedded filter effects.
- Or use custom code in the Page Settings or Embed element—note this requires basic HTML/CSS knowledge.
3. Workaround: Simulated Shadow in the Image Itself
- You can add a shadow directly to the PNG image in tools like Photoshop or Figma, exporting the image with the shadow baked in.
- This gives you full control over how the shadow follows the free-form shape.
4. Webflow-native Drop Shadow Tips
If you still want to apply a shadow to a PNG without contour accuracy:
- Select the Image element.
- Go to the Style panel.
- Under Effects > Box Shadow, apply:
- Offset X/Y to move the shadow.
- Blur and Spread as needed.
- Color and opacity to adjust realism.
Summary
Webflow allows drop shadows on PNGs, but the effect follows the image’s rectangular bounding box, not its transparent contours. For shape-following shadows, create them in your image editor or use custom SVG filters with code.