The SVG <feDropShadow> filter primitive creates a drop shadow of the input image. It can only be used inside a <filter> element.
The drop shadow color and opacity can be changed by using the flood-color and flood-opacity presentation attributes.
html,body,svg { height:100% }
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
</filter>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="0.5"
flood-color="cyan"/>
</filter>
<filter id="shadow3">
<feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0"
flood-color="pink" flood-opacity="0.5"/>
</filter>
</defs>
<circle cx="5" cy="50%" r="4"
style="fill:pink; filter:url(#shadow);"/>
<circle cx="15" cy="50%" r="4"
style="fill:pink; filter:url(#shadow2);"/>
<circle cx="25" cy="50%" r="4"
style="fill:pink; filter:url(#shadow3);"/>
</svg>
Attributes
dx- This attribute defines the x offset of the drop shadow.
Value type: <number>; Default value:2; Animatable: yes dy- This attribute defines the y offset of the drop shadow.
Value type: <number>; Default value:2; Animatable: yes stdDeviation- This attribute defines the standard deviation for the blur operation in the drop shadow.
Value type: <number>; Default value:2; Animatable: yes
Global attributes
- Core Attributes
- Most notably:
id - Styling Attributes
class,style- Filter primitive attributes
height,in,result,x,y,width- Presentation Attributes
- Most notably:
flood-color,flood-opacity
Usage notes
| Categories | Filter primitive element |
|---|---|
| Permitted content | Any number of the following elements, in any order:<animate>, <script>, <set> |
Specifications
| Specification | Status | Comment |
|---|---|---|
| Filter Effects Module Level 1 The definition of '<feDropShadow>' in that specification. |
Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
feDropShadow | Chrome Full support Yes | Edge Full support 79 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support Yes |
dx | Chrome Full support Yes | Edge Full support 79 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support Yes |
dy | Chrome Full support Yes | Edge Full support 79 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support Yes |
in | Chrome Full support Yes | Edge Full support 79 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support Yes |
stdDeviation | Chrome Full support Yes | Edge Full support 79 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown