A button that lifts slightly off the background, an icon that seems to float above an image, a single path in an illustration that needs a shadow without touching the rest: these effects used to require assembling four filter primitives by hand.
<feDropShadow> bundles that work into a single tag, the SVG equivalent of the CSS box-shadow property, but applicable to one specific shape inside a larger drawing rather than to a whole block of the page.
Definition
<feDropShadow> is an SVG filter primitive that casts a drop shadow behind whatever source it is given. Before it joined the specification, the same result required chaining four primitives: a blur with feGaussianBlur, an offset with feOffset, a flat colour with feFlood, then a merge with feComposite. <feDropShadow> does all four steps in one element.
It sits inside a <filter> like any primitive, then applies to a shape or a group with filter="url(#myId)".
Main attributes
| Attribute | Role | Default value |
|---|---|---|
dx | Horizontal offset of the shadow | 2 |
dy | Vertical offset of the shadow | 2 |
stdDeviation | Blur strength | 2 |
flood-color | Shadow colour | black |
flood-opacity | Shadow opacity | 1 |
Concrete rendering example
The example below adds a soft, offset shadow to a single star drawn with <polygon>, without touching the background or any other shape in the drawing.
<svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow
dx="4"
dy="6"
stdDeviation="4"
flood-color="#1e293b"
flood-opacity="0.4"
/>
</filter>
</defs>
<polygon
points="100,20 118,68 170,68 128,98 144,148 100,118 56,148 72,98 30,68 82,68"
fill="#facc15"
filter="url(#shadow)"
/>
</svg>Changing dx, dy or stdDeviation is enough to turn a soft, close shadow into a long, diffuse one, without ever retouching the star's outline.
Difference from a similar element
The most common mix-up is with the CSS filter: drop-shadow() property, which produces a very similar result but applies to an entire HTML or SVG element. <feDropShadow> is used inside an SVG drawing to shadow a single shape, such as one <path> in the middle of a group, something box-shadow cannot do since it always follows a box's rectangular outline.
Common pitfall
Like any filter, <feDropShadow> renders inside a region that, by default, extends only 10% beyond the shape on each side. A wide or heavily offset shadow can therefore end up cut off flat on an invisible edge, a flaw that only shows up in the final render. The fix is to enlarge the filter region with the x, y, width and height attributes, for example x="-50%" y="-50%" width="200%" height="200%".
Real-world use case
In an interface like Believemy's, <feDropShadow> lifts a badge icon off the rest of a card, shadows a single character in a logo made of <text> and shapes, or gives depth to a layered illustration without stacking several filter tags.
- An achievement badge that seems to float above a card
- A logo with a single shadowed letter to make it stand out
- A layered illustration with a sense of depth
FAQ
feDropShadow fully replace feGaussianBlur, feOffset, feFlood and feComposite?In most cases yes, since it produces the same visual result in a single tag; the manual chain still has value only when an extra step needs to sit between the blur and the offset, which the shortcut does not allow.
Yes, by placing several feDropShadow elements one after another in the same filter, each one adding to the previous result, which lets a crisp shadow and a diffuse shadow stack for a richer effect.
stdDeviation and dx or dy?stdDeviation only controls the blur, meaning how soft the shadow's edges look, while dx and dy move the entire shadow horizontally and vertically relative to the original shape.