How do I add an SVG drop shadow?

Set Blur, X, and Y, then click Add drop shadow. A with feDropShadow is wired to a wrapper group so the shadow sits outside the still-sharp graphic.

How is a drop shadow different from a blur filter?

Blur Filter blurs the icon itself. Drop shadow keeps the artwork crisp and paints an offset, faded copy behind it.

No. Inner shadow darkens inside the fill. This page only writes an outer feDropShadow. Use Add SVG Inner Shadow for the inset look.

No. Clips and masks stay. Remove SVG Filters deletes the shadow later without touching clipPath.

FAQ

Quick answers

How do I add an SVG drop shadow?: Set Blur, X, and Y, then click Add drop shadow. A <filter> with feDropShadow is wired to a wrapper group so the shadow sits outside the still-sharp graphic.
How is a drop shadow different from a blur filter?: Blur Filter blurs the icon itself. Drop shadow keeps the artwork crisp and paints an offset, faded copy behind it.
Does this write an inner shadow?: No. Inner shadow darkens inside the fill. This page only writes an outer feDropShadow. Use Add SVG Inner Shadow for the inset look.
Will adding a drop shadow strip clipPath or mask?: No. Clips and masks stay. Remove SVG Filters deletes the shadow later without touching clipPath.

Source

Blur X Y

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B