<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 10 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
    </filter>
  </defs>

  <circle cx="50%" cy="50%" r="4"
      style="fill:pink; filter:url(#shadow);"/>
</svg>

Attributes

dx
This attribute defines the x offset of the drop shadow.
Value type<number>; Default value: 2; Animatableyes
dy
This attribute defines the y offset of the drop shadow.
Value type<number>; Default value: 2; Animatableyes
stdDeviation
This attribute defines the standard deviation for the blur operation in the drop shadow.
Value type<number>; Default value: 2; Animatableyes

Global attributes

Core Attributes
Most notably: id
Styling Attributes
class, style
Filter primitive attributes
heightin, 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
feDropShadowChrome Full support YesEdge No support NoFirefox 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 ?
dxChrome Full support YesEdge No support NoFirefox 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 ?
dyChrome Full support YesEdge No support NoFirefox 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 ?
inChrome Full support YesEdge No support NoFirefox 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 ?
stdDeviationChrome Full support YesEdge No support NoFirefox 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 ?

Legend

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