How to Apply SVG Blur Filter  feGaussianBlur Guide
SVG feGaussianBlur adds soft blur effects to shapes, images, and text  use for glow effects, shadows, and depth-of-field simulations.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG feGaussianBlur Syntax
Define a `<filter>` containing `<feGaussianBlur>` in `<defs>`. Apply with `filter='url(#blurId)'` on any element. The `stdDeviation` attribute controls blur radius  higher values produce softer blur.
- <filter id='blur'><feGaussianBlur stdDeviation='5'/></filter>
- Apply: <rect filter='url(#blur)' .../>
- stdDeviation='5 10' for different x and y blur amounts
SVG Glow Effect with feGaussianBlur
Create a glow by blurring a duplicate of the shape behind the original. Use `<feMerge>` to composite the blurred and original layers: blurred layer first (glow), original on top (sharp).
- Merge: <feMerge><feMergeNode in='blur'/><feMergeNode in='SourceGraphic'/></feMerge>
- Blur stdDeviation 3–8 for subtle to strong glow
- Adjust blur color with feColorMatrix before merging
Frequently Asked Questions
How do I create a drop shadow using SVG blur filter?
Use feDropShadow shorthand: <feDropShadow dx='2' dy='4' stdDeviation='3' flood-color='rgba(0,0,0,0.5)'/>. Or combine feOffset + feGaussianBlur + feMerge for full control.
Is SVG blur filter better than CSS filter blur?
CSS filter: blur() is simpler and GPU-accelerated. SVG feGaussianBlur offers more pipeline control (composite, color adjustments). For simple blurs, use CSS.
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