The feDropShadow SVG element specifies a drop shadow of the input image.
Attributes
dx
Specifies the x offset of the drop shadow.
Value
Default
dy
Specifies the y offset of the drop shadow.
Value
Default
in
Specifies the input for the filter primitive.
If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.
Value
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>
Default
SourceGraphic (or result)
stdDeviation
Specifies the standard deviation for the blur operation in the drop shadow.
If two numbers are provided, the first number specifies a standard deviation along the x-axis and the second number specifies a standard deviation along the y-axis.
Value
Default
dx
<number>
dy
<number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="0" dy="10" flood-color="red" stdDeviation="0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
in
BackgroundAlpha
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="10" dy="10" in="BackgroundAlpha"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
BackgroundImage
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="10" dy="10" in="BackgroundImage"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
FillPaint
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="10" dy="10" in="FillPaint"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<filter-primitive-reference>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="-10" dy="-10" result="myresult"/>
<feDropShadow dx="10" dy="10" in="myresult"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
SourceAlpha
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="10" dy="10" in="SourceAlpha"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
SourceGraphic
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="10" dy="10" in="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
StrokePaint
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="10" dy="10" in="StrokePaint"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
stdDeviation
<number-optional-number>
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="0" dy="0" flood-color="red" stdDeviation="100 10"/>
</filter>
</defs>
<circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/>
</svg>
Internal
External