CODEWITHSUNDEEP
csssvgsvg-filters
Katie
Katie

Reputation: 48308

How do I create a svg drop shadow?

I've been using a bunch of tutorials to try to get my svg to have a drop shadow, but nothing is working!

Here's my fiddle: https://jsfiddle.net/5nfdovg5/

This is what I did:

  1. Created a gradient fill called "Gradient-1". This works:
    • enter image description here
  2. When I add the dropshadow filter (called "dropshadow"), it only shows the shadow, and none of the circle that is supposed to be on top.. just a black blurry circle:
    • enter image description here
  3. The desired effect I would like is here:

Any ideas on what I'm doing wrong?

Here's the full markup:

<svg width="200" height="200">
    <defs>
        <linearGradient id="Gradient-1" x1="20%" y1="30%" x2="40%" y2="80%">
            <stop offset="0%" stop-color="#B8D0DE"></stop>            
            <stop offset="100%" stop-color="#73A2BD"></stop>
        </linearGradient>
        <filter id="dropshadow" xmlns="http://www.w3.org/2000/svg" height="130%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3">
                <feOffset dx="2" dy="2" result="offsetblur">
                    <feComponentTransfer>
                        <feFuncA type="linear" slope="0.2"></feFuncA>
                    </feComponentTransfer>      
                    <feMerge>
                        <feMergeNode>
                            <feMergeNode in="SourceGraphic"></feMergeNode>
                        </feMergeNode>
                    </feMerge>
                </feOffset>
            </feGaussianBlur>
        </filter>
    </defs> 
    <circle cx="125" cy="125" r="25" filter="url(#dropshadow)" fill="url(#Gradient-1)"></circle>
</svg>

Upvotes: 4

Views: 2542

Answers (1)

Robert Longson
Robert Longson

Reputation: 124269

You seem to have nested the feFilter elements which the example drop shadow code you link to in the question does not do. Unnesting makes things work as expected.

<svg width="200" height="200">
    <defs>
        <linearGradient id="Gradient-1" x1="20%" y1="30%" x2="40%" y2="80%">
            <stop offset="0%" stop-color="#B8D0DE"></stop>            
            <stop offset="100%" stop-color="#73A2BD"></stop>
        </linearGradient>
        <filter id="dropshadow" xmlns="http://www.w3.org/2000/svg" height="130%" width="130%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
            <feOffset dx="2" dy="2" result="offsetblur"/>
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.2"></feFuncA>
            </feComponentTransfer>      
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    </defs> 
    <circle cx="125" cy="125" r="25" filter="url(#dropshadow)" fill="url(#Gradient-1)"></circle>
</svg>

Upvotes: 4

Related Questions