How do I add an SVG blur filter?

Set Blur and click Add blur. A with feGaussianBlur is applied to a wrapper group so the whole graphic goes soft.

How is a blur filter different from a drop shadow?

Drop shadow offsets a faded copy and leaves the icon sharp. Blur has no dx/dy — it is the icon going out of focus.

No. Inner shadow darkens inside a still-sharp fill. Blur has no feComposite inset.

Use Remove SVG Filters to delete filter= and the node. This page only adds feGaussianBlur.

FAQ

Quick answers

How do I add an SVG blur filter?: Set Blur and click Add blur. A <filter> with feGaussianBlur is applied to a wrapper group so the whole graphic goes soft.
How is a blur filter different from a drop shadow?: Drop shadow offsets a faded copy and leaves the icon sharp. Blur has no dx/dy — it is the icon going out of focus.
Does blur paint an inner shadow?: No. Inner shadow darkens inside a still-sharp fill. Blur has no feComposite inset.
How do I remove the blur after adding it?: Use Remove SVG Filters to delete filter= and the <filter> node. This page only adds feGaussianBlur.

Source

Blur

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B