SVG <feDropShadow> Element (original) (raw)

Last Updated : 31 Mar, 2022

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The element works in combination with other filter primitives to add a drop shadow to the graphic. It provides a blurred, colored, and optional offset layer behind the original input.

Syntax:

Attributes:

• in: It identifies input for the given filter primitive.
• dx, dy: It defines the shift in the position of the element in its respective x, y-axis.
• stdDeviation: It defines the amount of blur applied to the drop shadow. The default value is 0.

Example 1:

HTML `

    <defs>
        <filter id="drop_shadow" 
            filterUnits="objectBoundingBox" 
            x="-50%" y="-60%" width="250%" 
            height="250%">

            <feDropShadow in="SourceGraphic" 
                dx="1" dy="1" stdDeviation="30" 
                flood-color="darkgreen" />
        </filter>
    </defs>

    <rect x="40" y="40" width="100" height="100"
        style="stroke: #000000; 
            fill: lightgreen; 
            filter: url(#drop_shadow);" />

    <rect x="40" y="40" width="100" height="100"
        style="stroke: #000000; 
            fill: lightgreen; 
            filter: url(#drop_shadow);" />

    <g fill="#FFFFFF" stroke="black" 
        font-size="10" font-family="Verdana">
        <text x="50" y="90">GeeksForGeeks</text>
</svg>

`

Output:

Example 2:

HTML `

            <feDropShadow dx="18" dy="10" 
                stdDeviation="6" 
                flood-color="shadow" 
                flood-opacity="2" />
        </filter>
    </defs>

    <rect x="1" y="1" width="198" 
        height="118" style="stroke: #000000; 
            fill: green; filter: url(#blur);" />

    <circle cx="100" cy="60" r="55" 
        stroke="darkgreen" stroke-width="3" 
        fill="Lightgreen"
        style="stroke: filter: url(#blur);" />

    <g fill="#FFFFFF" stroke="Green" 
        font-size="10" c font-family="Verdana">
        <text x="60" y="62">GeeksForGeeks</text>
</svg>

`

Output: