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
SVG filter primitive creates a drop shadow of the input image. It can only be used inside a
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
Attributes
dx
-
This attribute defines the x offset of the drop shadow. Value type:
; Default value: 2
; Animatable: yes dy
-
This attribute defines the y offset of the drop shadow. Value type:
; Default value: 2
; Animatable: yes stdDeviation
-
This attribute defines the standard deviation for the blur operation in the drop shadow. Value type:
; Default value: 2
; Animatable: yes
DOM Interface
This element implements the SVGFEDropShadowElement
interface.
Example
Specifications
Specification |
---|
Filter Effects Module Level 1 # feDropShadowElement |
Browser compatibility
See also
- SVG Filter primitive attributes including
height
,in
,result
,x
,y
, andwidth
. - SVG presentation attributes, including
flood-color
, andflood-opacity
.