SVG Filters

Beginner
⏱️ 8 min read
📚 Updated: Aug 2025
🎯 2 Examples
Effects
SVG Filters tutorial illustration showing blur and shadow effects

What You’ll Learn

How to apply visual effects to SVG elements using SVG filters. You define a filter inside <defs> using a <filter> element and then apply it with filter="url(#id)".

You’ll learn the basic syntax, the most common filter primitives (feGaussianBlur, feOffset, feColorMatrix, feMerge), plus two practical examples: a blur effect and a drop-shadow effect.

⚡ Quick Reference — SVG Filter Basics

Define <filter>

Inside <defs> with an id

Apply filter

url(#filterId) on the target element

Common primitive feGaussianBlur

Softens edges and creates glow-like effects

Shadow tools feOffset + blur

Classic drop shadow pipeline

Basic Syntax
<svg>
  <defs>
    <filter id="filter-id">
      <!-- filter primitives go here -->
    </filter>
  </defs>

  <rect filter="url(#filter-id)" />
</svg>

👀 Live Preview — Blur & Shadow

These previews show two of the most common SVG filter effects. Scroll further down for the full code in the examples.

Gaussian blur
Drop shadow
1

Blur Filter (feGaussianBlur)

This example defines a Gaussian blur filter and applies it to a rectangle. The stdDeviation value controls how strong the blur is.

index.html
<!DOCTYPE html>
<html>
<body>

<svg width="240" height="160" viewBox="0 0 240 160">
  <defs>
    <filter id="blur-filter" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>

  <rect x="40" y="35" width="160" height="90" rx="14" fill="#2563eb" filter="url(#blur-filter)" />
</svg>

</body>
</html>
Try It Yourself
2

Drop Shadow (Offset + Blur + Merge)

A classic drop shadow is created by offsetting the original alpha, blurring it, tinting it, then merging the shadow and the original graphic.

index.html
<svg width="240" height="160" viewBox="0 0 240 160">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feOffset in="SourceAlpha" dx="0" dy="10" result="off" />
      <feGaussianBlur in="off" stdDeviation="8" result="blur" />
      <feColorMatrix in="blur" type="matrix"
        values="0 0 0 0 0
                0 0 0 0 0
                0 0 0 0 0
                0 0 0 0.35 0" result="shadow" />
      <feMerge>
        <feMergeNode in="shadow" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <circle cx="120" cy="70" r="42" fill="#f97316" filter="url(#shadow)" />
</svg>

🧠 How It Works

1

Define a filter in <defs>

Filters live in <defs> so you can reuse them. Give the <filter> an id and reference it later.

Definition
2

Use filter primitives

Each primitive performs one image-processing step. For example, feGaussianBlur softens pixels, feOffset moves them, and feColorMatrix adjusts colour/opacity.

Pipeline
3

Expand the filter region

Shadows and blurs extend beyond the shape. Increase x, y, width, and height on <filter> to prevent clipping.

Avoid clipping
4

Apply with filter="url(#id)"

Add the filter attribute to any SVG element: filter="url(#shadow)". The browser renders the element through your filter pipeline.

Apply
=

Pro-level SVG effects

SVG filters can create blur, shadows, colour shifts, and stylised visuals while staying resolution-independent.

💡 Best Practices

Do

  • Use <defs> so filters are reusable
  • Expand the filter region to avoid clipped blur/shadows
  • Keep effects subtle for performance (smaller blur values)
  • Prefer a single shared filter instead of duplicating many
  • Test on mobile devices if you use heavy filters

Don’t

  • Forget url(#id) — filters won’t apply without it
  • Leave the default filter region if you see clipped shadows
  • Stack many expensive primitives on large SVGs without testing
  • Use filters when a simple shape/gradient can achieve the same look
  • Assume identical results across all older browsers

Key Takeaways

1

Define filters in <defs> using <filter>

2

Apply them with filter="url(#id)"

3

Use feGaussianBlur for blur and glow effects

4

Use offset + blur + merge for drop shadows

5

Expand the filter region to prevent clipping

❓ Frequently Asked Questions

Define a <filter> (usually in <defs>) and apply it with filter="url(#id)". A filter is a pipeline of primitives that process pixels and output an effect.
Increase the filter region on <filter> using x, y, width, and height. Shadows and blurs need extra space beyond the original shape.
Use feOffset + feGaussianBlur, then combine the shadow with the original graphic using feMerge. This is the most compatible cross-browser approach.
Yes. Create the filter once with an id and apply it anywhere using filter="url(#id)".
Core primitives are widely supported in modern browsers. For best compatibility and performance, keep filters simple and test on your target devices.

Add Motion to Your SVGs

Next, learn how to attach events, hover states, and simple animations to SVG elements.

SVG Interactivity →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

SVG Ellipse SVG Interactivity