SVG feDropShadow Filter
feDropShadow bundles blur, offset, and color into a single filter primitive for simple, performant SVG drop shadows.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why feDropShadow Simplifies Shadow Filters
Before feDropShadow existed, creating a drop shadow required manually chaining feGaussianBlur, feOffset, feFlood, and feComposite primitives together — feDropShadow bundles that entire common pattern into one primitive with simple dx, dy, stdDeviation, and flood-color attributes, producing the same visual result with far less markup.
- Replaces a 4-primitive filter chain with a single simple element
- dx and dy attributes control the shadow's horizontal and vertical offset
- flood-color and flood-opacity control the shadow's tint and transparency
Browser Support and Fallback Considerations
feDropShadow has broad modern browser support, but for projects that need to support very old browsers, the equivalent manually chained filter primitives remain a safe fallback, and CSS's own drop-shadow() filter function offers a simpler alternative when the shadow doesn't need to be baked into the SVG file itself.
- Modern browsers support feDropShadow directly with no polyfill needed
- Manually chained primitives remain available as an older-browser fallback
- CSS filter: drop-shadow() is often simpler for shadows applied via stylesheet
Frequently Asked Questions
Is feDropShadow faster than chaining separate filter primitives manually?
Browsers generally optimize feDropShadow as an equivalent internally, so performance is similar — its main benefit is dramatically simpler, more maintainable markup rather than a raw speed improvement.
Should I use feDropShadow or CSS drop-shadow() for a website?
For CSS-driven websites, the CSS filter: drop-shadow() function is usually simpler since it doesn't require embedding filter markup in the SVG itself — feDropShadow is more useful when the shadow needs to be part of a static exported SVG file.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG