Chapter 19: SVG Blur Effects

SVG Blur Effects, which are one of the most popular and easiest-to-understand parts of SVG filters!

I’m your friendly teacher here, so we’ll go slow, step by step, with lots of copy-paste examples. By the end, you’ll understand how to make things look soft, dreamy, out-of-focus, glowing, or even create realistic drop shadows using blur.

What are SVG Blur Effects?

In SVG, the main way to create blur is with the <feGaussianBlur> filter primitive (the “fe” stands for “filter effect”).

• It applies a Gaussian blur — a very smooth, natural-looking blur (the same kind used in Photoshop, GIMP, CSS filter: blur(), etc.).
• The blur is based on a mathematical “bell curve” (Gaussian distribution) — pixels near the center affect the result more strongly, and the influence fades smoothly outward.
• Higher blur amount → softer / more dreamy look
• Lower blur amount → subtle softening / anti-aliasing effect

This is not the same as CSS filter: blur() — SVG blur is more flexible:

• You can blur only the alpha channel (shape outline) → perfect for shadows
• You can chain it with other effects (offset for shadows, merge for glows)
• You control horizontal vs vertical blur separately
• Works on shapes, text, images, groups — anything in SVG

The Key Element: <feGaussianBlur>

It almost always lives inside a <filter> in <defs>.

Core attributes:

Most common pattern (simple uniform blur):

→ stdDeviation=”6″ means roughly 6 units of blur radius (higher = more blur)

Example 1 – Basic Blur on a Shape

Result: Left circle crisp, right one soft and dreamy.

Try changing stdDeviation to 2, 5, 12, 25 — see how it grows.

Here are some visual examples showing different blur strengths (imagine seeing these side by side):

• Very light blur (stdDeviation ≈ 2–4) → subtle softening
• Medium (6–10) → obvious soft focus
• Heavy (15+) → strong blur, almost abstract

Example 2 – Directional Blur (horizontal vs vertical – very useful!)

This is great for:

• Fake motion blur (strong horizontal, zero vertical)
• Soft focus only in one direction
• Artistic typography effects

Example 3 – Blur only the shape outline (SourceAlpha) – foundation for shadows & glows

→ By using in=”SourceAlpha”, we blur only the transparency/shape, not the colors inside → perfect base for glows or outer shadows.

Quick Cheat Sheet – Blur Amounts Guide

Common beginner mistakes

• stdDeviation=”0″ → no blur at all (invisible effect)
• Forget to expand filter region → blur gets clipped at edges → add x=”-50%” y=”-50%” width=”200%” height=”200%” to <filter>
• Use on <line> without thick stroke → almost invisible blur
• Expect CSS-like blur(5px) → SVG units are user units (often ≈ pixels, but depends on viewBox)
• No filter=”url(#id)” on target element → nothing happens!

Mini practice tasks

1. Blur a photo (<image>) with stdDeviation=”4″ vs “12” — compare softness
2. Make text with horizontal-only blur (like fast movement)
3. Create a simple glow around a star: blur SourceAlpha + merge with original

Paste your code here if you want feedback — I’ll review it like we’re debugging together 😊

This is the foundation of blur in SVG — next we can build drop shadows, glows, soft inner shadows, or even motion blur animations using this primitive.

Which direction excites you most? Shadows with blur? Glow effects? Directional blur tricks? Just tell me — we’ll go deeper with more fun examples! 🚀