How to Create an SVG Drop Shadow?

A drop shadow enhances appearance of an SVG by giving it a 3D effect or a sense of depth, SVG drop shadows can be created using SVG filters and box-shadow or filter property.

  • SVG Filters: Provides fine-grained control over shadow properties.
  • CSS box-shadow or filter: Applies shadows using simpler syntax.

Approaches to Create an SVG Drop Shadow

Using the <filter> Element in SVG

This is a powerful approach that allows for detailed control over shadow effects, including blur, offsets, and color adjustments, SVG filters define graphical effects applied to elements, and the <feDropShadow>, filter primitive simplifies creating drop shadows.

Example Code

<!DOCTYPE html>
<html>

<head>
    <title>Title of the document</title>
</head>

<body>
    <svg width="200" height="200"
         xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="dropShadow" x="0" y="0" 
                    width="200%" height="200%">
                <feDropShadow dx="5" dy="5" stdDeviation="4" 
                              flood-color="black" flood-opacity="0.5" />
            </filter>
        </defs>
        <circle cx="50" cy="50" r="40" fill="green" 
                filter="url(#dropShadow)" />
    </svg>
</body>

</html>

Output

SVG Drop Shadow

Using CSS filter

You can apply CSS filter: drop-shadow; to SVG elements, the filter: drop-shadow CSS property is simpler than using SVG filters and is applied directly via a CSS stylesheet or style attribute.

Example Code

<!DOCTYPE html>
<html>

<head>
    <title>Title of the document</title>
</head>

<body>
    <svg width="200" height="200" 
         xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" fill="green" 
                style="filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.5));" />
    </svg>
</body>

</html>

Output

SVG Drop Shadow

Updated on: 2024-11-22T10:34:44+05:30

526 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements