How do I add an SVG inner shadow?

Set Blur, X, and Y, then click Add inner shadow. feOffset + feGaussianBlur + feComposite paint a shadow clipped to the fill, so it sits inside the shape.

How is an inner shadow different from a drop shadow?

Drop shadow uses feDropShadow outside the outline. Inner shadow never leaves the fill — it is the inset / concave look.

Does inner shadow blur the whole icon?

No. The graphic stays sharp; only the inner edge darkens. Add SVG Blur Filter if you want the artwork itself to go soft.

How do I take the inner shadow off later?

Open Remove SVG Filters. That deletes filter= and the def. This page only adds the inset effect.

Add SVG Inner Shadow — Free Tool

FAQ

Quick answers

How do I add an SVG inner shadow?: Set Blur, X, and Y, then click Add inner shadow. feOffset + feGaussianBlur + feComposite paint a shadow clipped to the fill, so it sits inside the shape.
How is an inner shadow different from a drop shadow?: Drop shadow uses feDropShadow outside the outline. Inner shadow never leaves the fill — it is the inset / concave look.
Does inner shadow blur the whole icon?: No. The graphic stays sharp; only the inner edge darkens. Add SVG Blur Filter if you want the artwork itself to go soft.
How do I take the inner shadow off later?: Open Remove SVG Filters. That deletes filter= and the <filter> def. This page only adds the inset effect.

Add drop shadow → Add blur filter → Remove SVG filters → Optimize SVG →

Privacy Terms

Source

Blur X Y

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Add SVG Inner Shadow

Live preview