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