W3cubDocs

/SVG

<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 1
# 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 No Yes Yes Yes Yes No Yes
dx Yes 79 Yes No Yes No Yes Yes Yes Yes No Yes
dy Yes 79 Yes No Yes No Yes Yes Yes Yes No Yes
in Yes 79 Yes No Yes No Yes Yes Yes Yes No Yes
stdDeviation Yes 79 Yes No Yes No Yes Yes Yes Yes No Yes

© 2005–2023 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