<feDropShadow>
The SVG <feDropShadow>
filter primitive creates a drop shadow of the input image. It can only be used inside a <filter>
element.
Note: The drop shadow color and opacity can be changed by using the flood-color
and flood-opacity
presentation attributes.
Example
<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
Specifications
Specification |
---|
Filter Effects Module Level 2 # feDropShadowElement |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
feDropShadow |
Yes
|
79
|
Yes
|
No
|
Yes
|
?
|
Yes
|
Yes
|
Yes
|
Yes
|
?
|
Yes
|
dx |
Yes
|
79
|
Yes
|
No
|
Yes
|
?
|
Yes
|
Yes
|
Yes
|
Yes
|
?
|
Yes
|
dy |
Yes
|
79
|
Yes
|
No
|
Yes
|
?
|
Yes
|
Yes
|
Yes
|
Yes
|
?
|
Yes
|
in |
Yes
|
79
|
Yes
|
No
|
Yes
|
?
|
Yes
|
Yes
|
Yes
|
Yes
|
?
|
Yes
|
stdDeviation |
Yes
|
79
|
Yes
|
No
|
Yes
|
?
|
Yes
|
Yes
|
Yes
|
Yes
|
?
|
Yes
|
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDropShadow