The <feDropShadow>
filter primitive creates a drop shadow of the input image. It is a shorthand filter, and is defined in terms of combinations of other filter primitives.
The result of the <feDropShadow>
filter is equivalent to the following:
<feGaussianBlur in="alpha-channel-of-feDropShadow-in" stdDeviation="stdDeviation-of-feDropShadow"/> <feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow" result="offsetblur"/> <feFlood flood-color="flood-color-of-feDropShadow" flood-opacity="flood-opacity-of-feDropShadow"/> <feComposite in2="offsetblur" operator="in"/> <feMerge> <feMergeNode/> <feMergeNode in="in-of-feDropShadow"/> </feMerge>
Usage context
Categories | Filter primitive element |
---|---|
Permitted content | Any number of the following elements, in any order:<animate> , <script> , <set> |
Attributes
Global attributes
Specific attributes
DOM Interface
This element implements the SVGFEDropShadowElement
interface.
Example
SVG
<svg width="200" height="200" xmlns="https://www.w3.org/2000/svg"> <defs> <filter id="shadow"> <feDropShadow dx="4" dy="8" stdDeviation="4"/> </filter> </defs> <circle cx="50%" cy="50%" r="80" style="fill:blue; filter:url(#shadow);"/> </svg>
Result
Specifications
Specification | Status | Comment |
---|---|---|
Filter Effects Module Level 1 The definition of '<feDistantLight>' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | ? | (Yes) | No support | (Yes) | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
Sebastianz
Last updated by:
Sebastianz,