<feDropShadow>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

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.

Usage context

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

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
in
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
Filter primitive attributes: x, y, width, height, result