SVG <feDropShadow> Filter

Last Updated:

What is <feDropShadow> Filter?

The SVG <feDropShadow> filter primitive creates a drop shadow of the input image.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg width="135" height="135" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="point"> <feDropShadow dx="4" dy="8" stdDeviation="4"/> </filter> </defs> <circle cx="60" cy="60" r="60" style="fill:#339933; filter:url(#point);"/> </svg> </body> </html>

Attributes Value

AttributeExplanation
in Specifies the input for the given filter primitive.
stdDeviation Specifies the standard deviation for the blur operation.
dx Specifies a shift along the x-axis on the position of an element or its content.
dy Specifies a shift along the y-axis on the position of an element or its content.

Share this Page

Meet the Author