SVG <filter> Effects

Beginner

⏱️ 12 min read

📚 Updated: Aug 2026

🎯 5 Examples

🚀 5 Try-it labs

Styling & Effects

SVG Filters tutorial illustration showing blur and drop shadow effects

Overview

What You’ll Learn

SVG filters add blur, shadows, glows, and colour effects to vector shapes without leaving SVG. This tutorial covers defining a <filter> in <defs>, applying it with filter="url(#id)", common primitives, expanding the filter region, five worked examples, and how filters compare to CSS effects.

<filter>

Definition

Declare reusable effects inside <defs> with a unique id.

url(#id)

Apply

Attach effects to shapes with filter="url(#filterId)".

Primitives

Pipeline steps

Chain feGaussianBlur, feOffset, feColorMatrix, and feMerge.

Blur

feGaussianBlur

Soften edges and create glow with stdDeviation.

Drop Shadow

Offset + blur

Build shadows by offsetting alpha, blurring, then merging.

Filter Region

Avoid clipping

Expand x/y/width/height so effects have room to render.

Introduction

SVG filters let you process the pixels of a vector graphic through a short pipeline of primitives. You define the effect once, give it an id, and attach it to rectangles, circles, text, or groups.

Unlike exporting blurred PNGs, SVG filters stay resolution-independent and can be reused across many elements. Start with blur and drop shadow — those two cover most UI needs — then explore colour matrices and merges as you grow.

Why it matters?

Icons, charts, and illustrations often need soft depth. SVG filters keep those effects inside the graphic — scalable, themeable, and free of extra image assets.

Key Highlights

Define Once

Put filters in <defs> and reuse them anywhere.

Primitive Pipeline

Each fe* step feeds the next for composed effects.

Expand the Region

Give blur and shadow room so they are not clipped.

Vector Native

Effects scale with the SVG — no blurry bitmaps.

In short: define a <filter>, fill it with primitives, expand its region, then apply it with filter="url(#id)".

Foundation

📝 Syntax

Basic form of an SVG filter definition and application:

index.html

<svg>
  <defs>
    <filter id="filter-id" x="-20%" y="-20%" width="140%" height="140%">
      <!-- filter primitives go here -->
    </filter>
  </defs>

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

Core pieces

Piece	Role	Description
`<defs>`	Container	Holds reusable definitions that are not drawn by themselves.
`<filter>`	Effect	Named with `id`; contains one or more filter primitives.
`filter="url(#id)"`	Apply	Presentation attribute on the target shape or group.
`x` `y` `width` `height`	Region	Expand beyond the shape so blur/shadow is not clipped.

Common primitives

Primitive	What it does
`feGaussianBlur`	Softens the graphic; `stdDeviation` controls strength.
`feOffset`	Moves the input by `dx` / `dy` (great for shadows).
`feColorMatrix`	Adjusts colour and alpha (tint or fade a shadow).
`feMerge`	Stacks results — usually shadow under `SourceGraphic`.
`feDropShadow`	Shorthand drop shadow in modern browsers.

Minimal workflow

index.html

<svg width="240" height="160" viewBox="0 0 240 160">
  <defs>
    <filter id="blur" 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)" />
</svg>

Cheat Sheet

⚡ Quick Reference

Goal	Code
Define a filter	`<filter id="fx">...</filter>` inside `<defs>`
Apply a filter	`filter="url(#fx)"`
Blur	`<feGaussianBlur stdDeviation="5" />`
Offset for shadow	`<feOffset in="SourceAlpha" dx="0" dy="8" />`
Avoid clipping	`x="-20%" y="-20%" width="140%" height="140%"`
Modern drop shadow	`<feDropShadow dx="0" dy="6" stdDeviation="4" />`

Compare

📋 SVG Filters vs CSS `filter` vs Gradients vs Patterns

Different tools for different visuals — pick the lightest option that fits.

SVG <filter>

vector pipeline

Reusable blur, shadow, and composed effects inside SVG

CSS filter

element effect

Quick blur/shadow on HTML or the whole SVG box

Gradients

colour fill

Smooth colour transitions without pixel processing

Patterns

repeating fill

Tiles and textures as paint servers

Context

When to Use SVG Filters

Reach for filters when the effect should live with the graphic and scale with it.

Soft depth on icons
Drop shadows and glows that stay crisp at any size.
Chart & diagram polish
Subtle blur on highlights or markers without extra assets.
Reusable brand effects
One filter id shared across many logo pieces.
Composed pipelines
Offset + blur + matrix + merge when CSS alone is not enough.
Not for heavy full-page FX
Large blurs on big canvases can be costly — keep effects subtle.

Key benefit: resolution-independent effects defined once and applied everywhere with a single url(#id).

Hands-On

Examples Gallery

Five starter snippets using SVG filters. Click View Output for a preview, or Try It Yourself to edit live.

📚 Getting Started

Blur a shape, then build a classic drop shadow pipeline.

Example 1 — Gaussian Blur

Define a blur filter and apply it to a rounded rectangle. stdDeviation controls how strong the blur is.

index.html

<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>

Try It Yourself

How It Works

The filter softens every pixel of the rectangle. Expanding the region to 140% keeps the blur halo from being cut off at the shape’s bounding box.

Example 2 — Drop Shadow (Offset + Blur + Merge)

Offset the alpha channel, blur it, fade it with a colour matrix, then merge the shadow under 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>

Try It Yourself

How It Works

SourceAlpha isolates the shape’s silhouette. Offsetting and blurring creates the soft shadow; feMerge paints that shadow first, then the original circle on top.

📈 Practical Patterns

Glows, shorthand shadows, and one filter on many shapes.

Example 3 — Soft Glow

Blur a copy of the graphic and merge it behind the sharp original for a gentle glow.

index.html

<svg width="240" height="140" viewBox="0 0 240 140">
  <defs>
    <filter id="glow" x="-40%" y="-40%" width="180%" height="180%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <circle cx="120" cy="70" r="36" fill="#8b5cf6" filter="url(#glow)" />
</svg>

Try It Yourself

How It Works

Unlike a drop shadow, the glow blurs the full coloured graphic (not just alpha), then stacks the blur under a sharp copy so the center stays vivid.

Example 4 — Shorthand `feDropShadow`

Modern browsers support a single primitive that offsets and blurs in one step.

index.html

<svg width="240" height="160" viewBox="0 0 240 160">
  <defs>
    <filter id="easy-shadow" x="-30%" y="-30%" width="160%" height="160%">
      <feDropShadow dx="0" dy="8" stdDeviation="5"
                    flood-color="#0f172a" flood-opacity="0.35" />
    </filter>
  </defs>

  <rect x="50" y="40" width="140" height="70" rx="12"
        fill="#14b8a6" filter="url(#easy-shadow)" />
</svg>

Try It Yourself

How It Works

feDropShadow is shorter than the offset/blur/merge recipe. Keep the classic pipeline when you need maximum control or older-browser compatibility.

Example 5 — Reuse One Filter on Many Shapes

Define a shared shadow once, then apply it to several elements with the same url(#id).

index.html

<svg width="280" height="140" viewBox="0 0 280 140">
  <defs>
    <filter id="card-shadow" x="-25%" y="-25%" width="150%" height="150%">
      <feDropShadow dx="0" dy="6" stdDeviation="4"
                    flood-opacity="0.3" />
    </filter>
  </defs>

  <rect x="20" y="30" width="70" height="70" rx="10"
        fill="#3b82f6" filter="url(#card-shadow)" />
  <circle cx="140" cy="65" r="35"
          fill="#f59e0b" filter="url(#card-shadow)" />
  <rect x="190" y="30" width="70" height="70" rx="10"
        fill="#10b981" filter="url(#card-shadow)" />
</svg>

Try It Yourself

How It Works

One definition keeps markup DRY and makes design tweaks easy — change stdDeviation once and every card updates.

Use Cases

Where SVG filters show up in real interfaces and graphics.

1. Icon Depth

Soft drop shadows under UI icons and badges.

Example: floating action button glyph.

2. Data Viz Highlights

Glow selected points or soften background layers.

Example: active marker glow on a chart.

3. Logo Treatments

Brand marks with consistent shadow or blur accents.

Example: shared filter across logo parts.

4. Soft Focus Effects

Blur decorative layers behind sharp foreground content.

Example: frosted blob behind a headline.

5. Animated UI

Animate stdDeviation or opacity for pulsing glows.

Example: status pulse on a live indicator.

6. Education Demos

Teach pipelines by showing each primitive’s result.

Example: step-through shadow construction.

Pro Tip: if a plain feDropShadow is enough, prefer it — save the longer offset/blur/merge stack for custom shadows.

Advantages

Why keep effects inside SVG instead of baking them into images.

1. Scales Cleanly
Effects redraw with the vector — no blurry PNG shadows.
2. Reusable Definitions
One id powers many shapes across the document.
3. Composable Pipelines
Stack primitives for custom looks CSS alone cannot express.
4. Lives With the Graphic
Export or embed the SVG and the effect travels with it.
5. Theme Friendly
Tweak flood colours and opacity without exporting new assets.

Pro Tip: keep stdDeviation modest — small values look polished and perform better on mobile GPUs.

Usage Tips

Follow these practices for clean, performant SVG filters.

1. Always Expand the Region
Shadows and blurs need space — set x/y/width/height beyond 100%.
2. Keep Filters in <defs>
Reusable, tidy, and not drawn as standalone content.
3. Prefer Subtle Blurs
Small stdDeviation values look intentional and stay fast.
4. Name Results Clearly
Use result attributes so multi-step pipelines stay readable.
5. Share One Filter
Apply the same url(#id) to many shapes instead of duplicating defs.

Pro Tip: test heavy filters on mobile early — GPUs differ more than desktop engines for large blurs.

Common Pitfalls

Avoid these mistakes when filters look wrong or disappear.

1. Missing url(#id)
Without the filter attribute, the definition never runs.
→ Add filter="url(#yourId)" and match the id exactly.
2. Clipped Shadows
Default filter regions crop soft edges.
→ Expand x, y, width, and height on <filter>.
3. Duplicate Filter IDs
Multiple inline SVGs with the same id can collide on a page.
→ Use unique ids per document, or isolate SVGs carefully.
4. Heavy Blurs on Large Canvases
Big stdDeviation values can stutter on mobile.
→ Keep effects subtle or apply filters to smaller groups.
5. Overusing Filters
Sometimes a darker shape or gradient is enough.
→ Prefer simpler paint when you only need a slight depth cue.

Pro Tip: if a shadow looks cut off, fix the filter region first — that one change solves most “broken filter” reports.

🧠 How SVG Filters Process a Shape

Define a filter in <defs>

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

Definition

Use filter primitives

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

Pipeline

Expand the filter region

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

Avoid clipping

Apply with filter="url(#id)"

Add the filter attribute to any SVG element. 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.

Important Notes

Filters belong in <defs> with a unique id.
Apply effects with filter="url(#id)" — the hash must match.
Expand the filter region so blur and shadow are not clipped.
feGaussianBlur’s stdDeviation controls blur strength.
Classic shadows: offset → blur → (optional matrix) → merge.
Heavy filters can be costly — keep values modest on large graphics.

Quick Takeaway: define once, expand the region, apply with url(#id) — and start with blur or drop shadow before stacking exotic primitives.

Compatibility

Browser Support

Core SVG filter primitives such as feGaussianBlur, feOffset, feColorMatrix, and feMerge are widely supported in modern browsers. feDropShadow works in current evergreen browsers; keep a classic pipeline if you need older coverage.

✓ SVG Filters

SVG <filter>

Define filters inand apply them with filter="url(#id)". Support is strong across Chrome, Firefox, Safari, Edge, and modern mobile browsers.

High Modern browsers

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

Core primitives Wide support

Bottom line: Safe for production UI effects. Prefer subtle filters, unique ids, and expanded regions. Test feDropShadow if you rely on the shorthand.

Wrap Up

🎉 Conclusion

SVG filters turn simple shapes into polished graphics — blur, glow, and drop shadow — without leaving the vector format. Define a pipeline in <defs>, expand the region, and apply it with filter="url(#id)".

Practice the five examples above, then continue to SVG Patterns to fill shapes with repeating designs.

Reuse one filter across shapes, keep blurs subtle, and expand the filter region whenever shadows look clipped.

View Examples Gallery Continue to Patterns

Pro Tips

💡 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
Reuse the same filter id across multiple inline SVGs on one page

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG filters

Build blur and shadow the SVG way.

Core concepts

fx 01

<filter>

Define in <defs>

API

# 02

Apply

url(#id)

Use

● 03

Blur

feGaussianBlur

▼ 04

Shadow

Offset + blur + merge

Depth

▢ 05

Region

Expand to avoid clip

Layout

❓ Frequently Asked Questions

How do SVG filters work?

SVG filters are defined in a <filter> element (usually inside <defs>) and applied with filter="url(#id)". A filter is made of one or more primitives (like feGaussianBlur or feOffset) that process pixels and produce an effect.

Why is my SVG filter clipped?

Filters can be clipped to a default region. Expand the filter region using x, y, width, and height on <filter> (for example x="-20%" y="-20%" width="140%" height="140%") so shadows and blurs have enough space.

How do I create a drop shadow in SVG?

A classic drop shadow uses feOffset + feGaussianBlur, optionally feColorMatrix for opacity, then feMerge to combine the shadow with SourceGraphic. Modern browsers also support the simpler feDropShadow primitive.

Can I reuse one filter for multiple SVG elements?

Yes. Define the filter once in <defs> with an id, then apply it to any element using filter="url(#yourFilterId)".

Are SVG filters supported in all browsers?

Core SVG filters are well supported in modern browsers. Some newer primitives may vary, so keep filters simple and test on your target devices for best performance.

When should I use CSS filter instead of SVG filter?

CSS filter is great for whole-element blur/shadow on HTML. Use SVG filters when you need vector-native pipelines, reusable defs, or effects composed from multiple primitives inside the SVG itself.

Did you Know? 🔊

An SVG <filter> is a reusable pixel pipeline — define it once in <defs>, then apply it with filter="url(#id)" on any shape. Built-in inputs like SourceGraphic and SourceAlpha let primitives tap the original paint or just its silhouette — that’s how drop shadows stay soft without blurring the fill.

Continue to SVG Patterns

Learn how to fill shapes with repeating tiles using <pattern>.

Patterns tutorial →

About the author

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 Stroke SVG Patterns

SVG <filter> Effects

What You’ll Learn

<filter>

url(#id)

Primitives

Blur

Drop Shadow

Filter Region

Introduction

Why it matters?

Define Once

Primitive Pipeline

Expand the Region

Vector Native

📝 Syntax

Core pieces

Common primitives

Minimal workflow

⚡ Quick Reference

📋 SVG Filters vs CSS filter vs Gradients vs Patterns

When to Use SVG Filters

Soft depth on icons

Chart & diagram polish

Reusable brand effects

Composed pipelines

Not for heavy full-page FX

Examples Gallery

📚 Getting Started

Example 1 — Gaussian Blur

How It Works

Example 2 — Drop Shadow (Offset + Blur + Merge)

How It Works

📈 Practical Patterns

Example 3 — Soft Glow

How It Works

Example 4 — Shorthand feDropShadow

How It Works

Example 5 — Reuse One Filter on Many Shapes

How It Works

Use Cases

1. Icon Depth

2. Data Viz Highlights

3. Logo Treatments

4. Soft Focus Effects

5. Animated UI

6. Education Demos

Advantages

1. Scales Cleanly

2. Reusable Definitions

3. Composable Pipelines

4. Lives With the Graphic

5. Theme Friendly

Usage Tips

1. Always Expand the Region

2. Keep Filters in <defs>

3. Prefer Subtle Blurs

4. Name Results Clearly

5. Share One Filter

Common Pitfalls

1. Missing url(#id)

2. Clipped Shadows

3. Duplicate Filter IDs

4. Heavy Blurs on Large Canvases

5. Overusing Filters

🧠 How SVG Filters Process a Shape

Define a filter in <defs>

Use filter primitives

Expand the filter region

Apply with filter="url(#id)"

Pro-level SVG effects

Important Notes

Browser Support

SVG &lt;filter&gt;

🎉 Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about SVG filters

<filter>

📋 SVG Filters vs CSS `filter` vs Gradients vs Patterns

Example 4 — Shorthand `feDropShadow`

1. Missing `url(#id)`

SVG <filter>