Chapter 20: SVG Blur Effects
SVG Blur Effects are one of the most popular and beginner-friendly uses of SVG <filter>. They make any shape, text, image, icon, button, or group look soft, dreamy, glowing, out-of-focus, or professional-shadowed — exactly like the Gaussian Blur tool in Photoshop, but done with pure code inside SVG.
The main tool for blur in SVG is:
|
0 1 2 3 4 5 6 |
<feGaussianBlur stdDeviation="…" … /> |
That one primitive creates almost every blur effect people use.
1. What Actually Happens When We “Blur” Something?
A Gaussian blur takes each pixel and averages it with the pixels around it — the bigger the area (the “radius”), the softer / more smeared the result becomes.
In SVG we control this with one number:
- stdDeviation = the “blur radius” or “strength”
- 0 = no blur at all
- 1–3 = very light soft edge
- 4–8 = nice everyday blur (shadows, glows)
- 10–20+ = heavy dreamy / out-of-focus effect
You can also give two values → different horizontal vs vertical blur:
|
0 1 2 3 4 5 6 |
stdDeviation="12 4" → strong horizontal blur, light vertical blur |
2. Your First Blur – Simple Soft Shadow on a Rectangle
Copy-paste this complete file:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Blur – Basic Shadow</title> </head> <body> <h1>Simple Drop Shadow with Blur</h1> <svg width="400" height="250" viewBox="0 0 400 250" style="border:1px solid #eee;"> <defs> <filter id="softShadow"> <!-- Step 1: Blur the alpha channel (shape outline) --> <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur"/> <!-- Step 2: Move the blurred shadow a bit down-right --> <feOffset in="blur" dx="8" dy="8" result="offsetBlur"/> <!-- Step 3: Make shadow semi-transparent black --> <feFlood flood-color="#000" flood-opacity="0.5" result="shadowColor"/> <!-- Step 4: Clip the colored shadow to the blurred area --> <feComposite in="shadowColor" in2="offsetBlur" operator="in" result="shadow"/> <!-- Step 5: Put shadow behind original shape --> <feMerge> <feMergeNode in="shadow"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <rect x="80" y="80" width="240" height="120" rx="12" fill="#4a90e2" filter="url(#softShadow)"/> <text x="200" y="145" font-size="32" text-anchor="middle" fill="white">Blur Shadow</text> </svg> </body> </html> |
Result: Nice soft drop shadow under the blue rounded rectangle.
3. The Short Modern Way – <feDropShadow> (Recommended in 2026)
Most browsers now support this single-line version:
|
0 1 2 3 4 5 6 7 8 |
<filter id="easyShadow"> <feDropShadow dx="6" dy="6" stdDeviation="5" flood-color="#00000080"/> </filter> |
Apply: filter=”url(#easyShadow)”
→ Much shorter, same effect as the long version above.
4. Popular Blur Effects Everyone Uses (Copy-Paste These!)
A. Glow / Outer Glow (Neon Text Look)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<filter id="glow"> <feGaussianBlur stdDeviation="8" result="blur"/> <feMerge> <feMergeNode in="blur"/> <!-- repeat 2–4 times for stronger glow --> <feMergeNode in="blur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> <text x="200" y="120" font-size="60" fill="#00ffff" filter="url(#glow)" text-anchor="middle"> NEON GLOW </text> |
B. Inner Glow (Soft Inner Light)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<filter id="innerGlow"> <feFlood flood-color="#ffffff" flood-opacity="0.8" result="color"/> <feComposite in="color" in2="SourceAlpha" operator="in" result="glow"/> <feGaussianBlur in="glow" stdDeviation="6" result="blur"/> <feComposite in="blur" in2="SourceAlpha" operator="in" result="inner"/> <feMerge> <feMergeNode in="inner"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> |
C. Only Blur – No Shadow (Dreamy / Frosted Look)
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<filter id="dreamy"> <feGaussianBlur stdDeviation="10"/> </filter> <image href="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" x="0" y="0" width="400" height="300" filter="url(#dreamy)"/> |
→ Makes photo look soft / out-of-focus
D. Directional Blur (Motion / Speed Effect)
|
0 1 2 3 4 5 6 7 8 9 10 |
<filter id="motionBlur"> <feGaussianBlur stdDeviation="12 2"/> <!-- strong horizontal, weak vertical --> </filter> <path d="M50 100 L350 100" stroke="red" stroke-width="20" filter="url(#motionBlur)"/> |
→ Looks like fast horizontal movement
5. Quick Reference Table – Blur Strength Guide
| stdDeviation value | Visual feel | Best used for |
|---|---|---|
| 1–3 | Very subtle softening | Light edge smoothing |
| 4–8 | Classic drop shadow / soft glow | Most UI buttons, cards, text |
| 9–15 | Strong glow / dreamy blur | Neon, glassmorphism, backgrounds |
| 16–30+ | Heavy out-of-focus / bokeh | Artistic photo effects |
6. Teacher’s Important Tips 😄
- Always apply blur to SourceAlpha first (shape outline) if you want shadow/glow without filling the whole shape
- Use <feMerge> to layer blurred copies for stronger glow
- Blur is expensive — don’t put heavy blur on huge areas or many elements on mobile
- Combine with filter=”url(#blur) brightness(1.2)” for modern glass / frosted glass look
- Common mistake: Apply filter but forget result names → effect disappears
- Pro trick: Animate stdDeviation → pulsing glow or focus/unfocus effect
Understood SVG Blur Effects now? This is the foundation — almost every cool SVG filter starts with feGaussianBlur.
Tell me what you want next:
- Animated blur (breathing glow)?
- Glassmorphism card with blur background?
- Blur only edges (vignette effect)?
- Blur on imported photo + text overlay?
- Or move to other filters (color matrix, turbulence)?
Just say — we can build any blur style together right now! 🚀
