SVG Blur Effects
Blur effects are one of the most commonly used SVG filter effects, implemented using the <feGaussianBlur> element.
Basic Syntax
html
<svg width="200" height="100">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
</filter>
</defs>
<rect filter="url(#blur)" x="20" y="20" width="60" height="60" fill="#3b82f6"/>
</svg>Main Properties
| Property | Description |
|---|---|
stdDeviation | Blur level (higher value = more blur) |
in | Input source |
result | Output result name |
Different Blur Levels
html
<svg width="500" height="120">
<defs>
<filter id="blur0"><feGaussianBlur stdDeviation="0"/></filter>
<filter id="blur2"><feGaussianBlur stdDeviation="2"/></filter>
<filter id="blur5"><feGaussianBlur stdDeviation="5"/></filter>
<filter id="blur10"><feGaussianBlur stdDeviation="10"/></filter>
</defs>
<g>
<rect x="20" y="20" width="60" height="60" fill="#3b82f6" filter="url(#blur0)"/>
<text x="50" y="100" text-anchor="middle" font-size="11">0</text>
</g>
<g>
<rect x="120" y="20" width="60" height="60" fill="#3b82f6" filter="url(#blur2)"/>
<text x="150" y="100" text-anchor="middle" font-size="11">2</text>
</g>
<g>
<rect x="220" y="20" width="60" height="60" fill="#3b82f6" filter="url(#blur5)"/>
<text x="250" y="100" text-anchor="middle" font-size="11">5</text>
</g>
<g>
<rect x="320" y="20" width="60" height="60" fill="#3b82f6" filter="url(#blur10)"/>
<text x="350" y="100" text-anchor="middle" font-size="11">10</text>
</g>
</svg>Independent X/Y Direction Blur
You can set the blur level for X and Y directions separately:
html
<svg width="400" height="150">
<defs>
<!-- Horizontal blur -->
<filter id="blurX" x="-20%" width="140%">
<feGaussianBlur stdDeviation="10,0"/>
</filter>
<!-- Vertical blur -->
<filter id="blurY" y="-20%" height="140%">
<feGaussianBlur stdDeviation="0,10"/>
</filter>
<!-- Bidirectional blur -->
<filter id="blurXY" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="10,10"/>
</filter>
</defs>
<rect x="30" y="30" width="80" height="80" fill="#3b82f6" filter="url(#blurX)"/>
<text x="70" y="130" text-anchor="middle" font-size="11">Horizontal Blur</text>
<rect x="160" y="30" width="80" height="80" fill="#22c55e" filter="url(#blurY)"/>
<text x="200" y="130" text-anchor="middle" font-size="11">Vertical Blur</text>
<rect x="290" y="30" width="80" height="80" fill="#ef4444" filter="url(#blurXY)"/>
<text x="330" y="130" text-anchor="middle" font-size="11">Bidirectional Blur</text>
</svg>Blur Combined with Original Image
Blurred Background
html
<svg width="250" height="150">
<defs>
<filter id="bgBlur">
<feGaussianBlur stdDeviation="3"/>
</filter>
</defs>
<!-- Blurred background -->
<rect x="20" y="20" width="210" height="110" rx="10" fill="#3b82f6" filter="url(#bgBlur)"/>
<!-- Clear foreground -->
<rect x="40" y="40" width="170" height="70" rx="8" fill="white" opacity="0.9"/>
<text x="125" y="80" text-anchor="middle" font-size="16" fill="#1f2937">Clear Content</text>
</svg>Frosted Glass Effect
html
<svg width="300" height="200">
<defs>
<filter id="frosted" x="0" y="0" width="100%" height="100%">
<feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
</filter>
</defs>
<!-- Background pattern -->
<rect x="0" y="0" width="300" height="200" fill="#3b82f6"/>
<circle cx="50" cy="50" r="40" fill="#22c55e"/>
<circle cx="150" cy="150" r="50" fill="#f59e0b"/>
<circle cx="250" cy="80" r="35" fill="#ef4444"/>
<!-- Frosted glass overlay -->
<rect x="50" y="50" width="200" height="100" rx="10"
fill="white" fill-opacity="0.3" filter="url(#frosted)"/>
<rect x="50" y="50" width="200" height="100" rx="10"
fill="white" fill-opacity="0.5"/>
<text x="150" y="105" text-anchor="middle" font-size="18" fill="#1f2937">Frosted Glass</text>
</svg>Dynamic Blur Effects
Hover Blur
html
<style>
.blur-hover {
transition: filter 0.3s ease;
}
.blur-hover:hover {
filter: url(#hoverBlur);
}
</style>
<svg width="200" height="100">
<defs>
<filter id="hoverBlur">
<feGaussianBlur stdDeviation="3"/>
</filter>
</defs>
<rect class="blur-hover" x="20" y="20" width="160" height="60" rx="8" fill="#3b82f6"/>
</svg>Blur Animation
html
<svg width="200" height="100">
<defs>
<filter id="animatedBlur">
<feGaussianBlur stdDeviation="0">
<animate attributeName="stdDeviation" values="0;5;0" dur="2s" repeatCount="indefinite"/>
</feGaussianBlur>
</filter>
</defs>
<circle cx="100" cy="50" r="35" fill="#3b82f6" filter="url(#animatedBlur)"/>
</svg>Practical Application Examples
Focus Effect
html
<svg width="300" height="200">
<defs>
<filter id="focusBlur" x="-10%" y="-10%" width="120%" height="120%">
<feGaussianBlur stdDeviation="4"/>
</filter>
</defs>
<!-- Blurred background elements -->
<circle cx="60" cy="60" r="40" fill="#e5e7eb" filter="url(#focusBlur)"/>
<circle cx="240" cy="60" r="35" fill="#e5e7eb" filter="url(#focusBlur)"/>
<rect x="30" y="130" width="60" height="50" fill="#e5e7eb" filter="url(#focusBlur)"/>
<rect x="210" y="120" width="70" height="60" fill="#e5e7eb" filter="url(#focusBlur)"/>
<!-- Clear focus element -->
<circle cx="150" cy="100" r="50" fill="#3b82f6"/>
<text x="150" y="107" text-anchor="middle" fill="white" font-size="16" font-weight="bold">Focus</text>
</svg>Loading State
html
<svg width="200" height="80">
<defs>
<filter id="loadingBlur">
<feGaussianBlur stdDeviation="2"/>
</filter>
</defs>
<!-- Blurred placeholder content -->
<rect x="20" y="15" width="160" height="20" rx="4" fill="#e5e7eb" filter="url(#loadingBlur)"/>
<rect x="20" y="45" width="120" height="20" rx="4" fill="#e5e7eb" filter="url(#loadingBlur)"/>
</svg>Depth Effect (Depth of Field)
html
<svg width="350" height="150">
<defs>
<filter id="farBlur"><feGaussianBlur stdDeviation="4"/></filter>
<filter id="midBlur"><feGaussianBlur stdDeviation="1"/></filter>
</defs>
<!-- Far (most blurred) -->
<circle cx="280" cy="75" r="50" fill="#94a3b8" filter="url(#farBlur)"/>
<!-- Middle (slightly blurred) -->
<circle cx="180" cy="75" r="45" fill="#64748b" filter="url(#midBlur)"/>
<!-- Near (clear) -->
<circle cx="80" cy="75" r="55" fill="#3b82f6"/>
</svg>Masked Blur Area
html
<svg width="300" height="150">
<defs>
<filter id="blurMask" x="0" y="0" width="100%" height="100%">
<feGaussianBlur stdDeviation="5"/>
</filter>
<clipPath id="blurClip">
<rect x="100" y="30" width="100" height="90"/>
</clipPath>
</defs>
<!-- Background -->
<rect x="20" y="20" width="260" height="110" rx="10" fill="#3b82f6"/>
<text x="150" y="85" text-anchor="middle" fill="white" font-size="24">Sensitive Content</text>
<!-- Partial blur -->
<g clip-path="url(#blurClip)">
<rect x="20" y="20" width="260" height="110" rx="10" fill="#3b82f6" filter="url(#blurMask)"/>
</g>
</svg>Text Shadow Effect
html
<svg width="300" height="80">
<defs>
<filter id="textBlur" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
<feOffset in="blur" dx="3" dy="3" result="shadow"/>
<feMerge>
<feMergeNode in="shadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text x="150" y="50" text-anchor="middle" font-size="36" font-weight="bold"
fill="#1f2937" filter="url(#textBlur)">
Shadow Text
</text>
</svg>Neon Glow
html
<svg width="300" height="100">
<defs>
<filter id="neonGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="blur1"/>
<feGaussianBlur stdDeviation="8" result="blur2"/>
<feMerge>
<feMergeNode in="blur2"/>
<feMergeNode in="blur1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect x="0" y="0" width="300" height="100" fill="#1f2937"/>
<text x="150" y="60" text-anchor="middle" font-size="32" font-weight="bold"
fill="#22d3ee" filter="url(#neonGlow)">
NEON
</text>
</svg>Next Steps
Now that you've mastered blur effects, let's learn about SVG Shadow!