SVG Shadow Generator — Drop Shadows for SVG
Add realistic drop shadows and glow effects to SVG elements using SVG filter elements. Generate the filter code you need instantly.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Shadows vs CSS Shadows
SVG drop shadows use the filter element with feDropShadow or feGaussianBlur primitives, not CSS box-shadow.
- CSS box-shadow: works on HTML elements but not on SVG paths inside an SVG
- SVG filter (feDropShadow): works on any SVG element — paths, groups, images
- CSS filter: drop-shadow(x y blur color) works as CSS on SVG elements in modern browsers
- Best for shapes: SVG feDropShadow follows the exact shape of the SVG path (not a rectangle)
- Performance: GPU-accelerated in modern browsers — minimal impact on rendering speed
SVG Shadow Code Patterns
Common SVG shadow implementations using filter elements.
- Simple drop shadow: <filter id='shadow'><feDropShadow dx='2' dy='3' stdDeviation='4' flood-color='rgba(0,0,0,0.3)'/></filter>
- Glow effect: <filter id='glow'><feGaussianBlur stdDeviation='5' result='blur'/><feMerge><feMergeNode in='blur'/><feMergeNode in='SourceGraphic'/></feMerge></filter>
- Apply to path: <path d='...' filter='url(#shadow)'/>
- Inner shadow: requires feComposite and feFlood combination
- Colored glow: set flood-color on feDropShadow to any color for colored glow
Frequently Asked Questions
Why doesn't CSS box-shadow work on my SVG path?
CSS box-shadow applies to the bounding rectangle of an element, not to the shape. Use SVG's feDropShadow filter for path-shaped shadows.
How do I add a glow effect to an SVG icon?
Add a filter with feGaussianBlur and feMerge to create a glow: blur the graphic and merge the blurred version behind the original. Apply the filter ID to the path or group.
Do SVG filters work in all browsers?
Yes — SVG filters are supported in all modern browsers (Chrome, Firefox, Safari, Edge). Performance may vary for very complex filter chains.
Can I animate SVG shadows?
Yes — animate the SVG filter attributes using CSS transitions or JavaScript. Animate feDropShadow's dx, dy, and stdDeviation attributes for moving shadows on hover.
Does CSS filter: drop-shadow work on SVG?
Yes — CSS filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.3)) applied to an SVG element follows the path shape, not the bounding box. This is often simpler than SVG's feDropShadow.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free