How do I create a svg drop shadow? - css

Question

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:
Created a gradient fill called "Gradient-1". This works:
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:
The desired effect I would like is here:
http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow-lighter.svg
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>

Answer 1

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>