<feDropShadow>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The <feDropShadow> SVG 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.

Like other filter primitives, it handles color components in the linearRGB color space by default. You can use color-interpolation-filters to use sRGB instead.

Example

html
<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-optional-number>; Default value: 2; Animatable: yes

Usage context

CategoriesFilter primitive element
Permitted contentAny number of the following elements, in any order:
<animate>, <script>, <set>

Specifications

Specification
Filter Effects Module Level 1
# feDropShadowElement

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
feDropShadow
dx
dy
in
stdDeviation

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also