<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

Categories Filter primitive element
Permitted content Any number of the following elements, in any order:
<animate>, <script>, <set>

Specifications

Specification
Filter Effects Module Level 2 (Filter Effects 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