<feDropShadow>

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.

<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

CategoriesFilter primitive element
Permitted contentAny 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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
feDropShadowChrome Full support YesEdge Full support 79Firefox Full support YesIE No support NoOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
dxChrome Full support YesEdge Full support 79Firefox Full support YesIE No support NoOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
dyChrome Full support YesEdge Full support 79Firefox Full support YesIE No support NoOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
inChrome Full support YesEdge Full support 79Firefox Full support YesIE No support NoOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
stdDeviationChrome Full support YesEdge Full support 79Firefox Full support YesIE No support NoOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes

Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown