SVG Filter Effects Guide
SVG filters are the most powerful visual effects in the browser — blur, shadows, color transforms, and more, all hardware-accelerated.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Applying SVG Filters
Define filters in <defs> and reference them on elements.
- <defs><filter id='blur'><feGaussianBlur stdDeviation='3'/></filter></defs>
- <rect filter='url(#blur)' .../> — applies blur to the rect
- Or CSS: .blurred { filter: url(#blur); } — applies to any HTML or SVG element
- SVG filters process the element's pixels through the filter primitives in sequence
- Multiple primitives chain together: output of one becomes input of the next
Common SVG Filter Primitives
The most useful SVG filter effects.
- feGaussianBlur stdDeviation='4': Gaussian blur — soft out-of-focus effect
- feDropShadow dx='2' dy='2' stdDeviation='3': drop shadow (shorthand for common shadow pattern)
- feColorMatrix type='saturate' values='0': grayscale conversion
- feColorMatrix type='hueRotate' values='90': shift hue by 90 degrees
- feDisplacementMap: distort element based on a texture — wavy water effect
- feBlend in='SourceGraphic' in2='effect' mode='multiply': Photoshop-style blend modes
Drop Shadow with SVG Filter
The most common SVG filter use case.
- <filter id='shadow'><feDropShadow dx='2' dy='4' stdDeviation='4' flood-color='rgba(0,0,0,0.3)'/></filter>
- dx/dy: horizontal and vertical offset
- stdDeviation: blur radius of the shadow
- flood-color: shadow color with optional opacity
- Much more flexible than CSS box-shadow — works on SVG paths and text precisely
Frequently Asked Questions
Are SVG filters hardware-accelerated?
Most browsers hardware-accelerate SVG filters. However, very complex filter chains (many primitives, large blur radii) can still impact performance. Test on mobile devices.
What's the difference between SVG filter and CSS filter?
CSS filters are convenient shorthand (blur(), drop-shadow(), grayscale()) for common SVG filter effects. SVG filters are more powerful: they support custom filter chains, displacement maps, morphology, and composite operations not available in CSS.
Can I apply an SVG filter to an HTML element?
Yes — define the SVG filter in an inline SVG in the page, then apply via CSS: .element { filter: url(#myFilter); }. This works in Chrome and Firefox; Safari support varies by filter type.
How do I create a glow effect in SVG?
<filter id='glow'><feGaussianBlur stdDeviation='4' result='blur'/><feComposite in='SourceGraphic' in2='blur' operator='over'/></filter> — blurs and composites over original for a glow effect.
Do SVG filters work on animated SVG?
Yes — SVG filters are applied per-frame during animation. Filters with large blur radii on animating elements can impact performance — use the filter sparingly during motion.
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