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, 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 seconds.
Try It Free — Convert Image to SVG