A recent project I was working on called for adding a drop shadow to an SVG icon. My first thought was to use the box-shadow style like I usually do for drop shadows. Unfortunately, this just added a drop shadow to the box object and not the paths in the SVG.

For this scenario, I was using an SVG sprite like the following:

After some Googling, I found a solution that worked for me. It involved adding an SVG filter to my sprite that I could apply using CSS. Below is the code I ended up adding to my sprite:

I’m not going to go into details of what everything in the filter means, but the important parts are the feOffset  and feFlood . Those settings will allow you to change the distance and color of your drop shadow. Here is what my final SVG sprite looked like:

Now we can use CSS to apply our drop shadow. For this, we will be using the filter property. Here is an example of the HTML and CSS used to display the SVG.

You might be wonder what the extra CSS properties are for. These extra properties just make sure that the SVG icon takes on the font size and color of wherever it is inserted.

Now you know the proper way to add a drop shadow to an SVG.