How to Add SVG Drop Shadow  feDropShadow Filter Guide
SVG feDropShadow adds configurable drop shadows to any SVG element  control offset, blur, color, and opacity directly in SVG markup.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG feDropShadow Shorthand
`<feDropShadow>` is the concise way to add shadows: set `dx`, `dy` (offset), `stdDeviation` (blur), `flood-color` (shadow color), and `flood-opacity`. It's equivalent to feOffset + feGaussianBlur + feFlood + feComposite + feMerge.
- <feDropShadow dx='3' dy='3' stdDeviation='4' flood-color='#000' flood-opacity='0.5'/>
- dx/dy: positive moves shadow right/down
- flood-color accepts any CSS color value
Colored and Multiple Shadows with SVG Filters
Chain multiple feDropShadow filters or build a manual pipeline to add colored shadows (red glow, blue shadow). SVG filters can layer multiple shadow passes unlike CSS box-shadow in some contexts.
- Chain two filter primitives for double shadow effect
- Use flood-color='#ff0000' for colored shadow/glow
- Wrap in <filter> and apply filter attribute to element
Frequently Asked Questions
What is the difference between SVG feDropShadow and CSS drop-shadow()?
CSS filter: drop-shadow() is simpler syntax; SVG feDropShadow gives the same result but in SVG markup. Both follow the element shape, unlike CSS box-shadow which follows the box.
Can I add a drop shadow to SVG text?
Yes  apply filter='url(#shadow)' with feDropShadow to a <text> element for text drop shadows that follow the actual glyph outlines.
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