6

can you please take a look at this demo and let me know how I can add box shadow to svg using CSS?

I already tried these

.kiwi {
  fill: #94d31b; 
  box-shadow: 10px 10px 5px #888888;
  -webkit-filter: drop-shadow( -5px -5px 5px #000 );
  filter: drop-shadow( -5px -5px 5px #000 ); 
  -webkit-svg-shadow: 0 0 7px #53BE12;
}

but they didn't' add any shadow to the SVG

Suffii
  • 5,694
  • 15
  • 55
  • 92
  • 1
    `-webkit-filter` will work (Chrome) but for the full SVG. Ex: if it was applied to `#Layer_1` for example. Placing your kiwi alone in a separate SVG might be a solution. – helderdarocha Mar 21 '14 at 15:22
  • 1
    Something like this (not an answer - just a starting point): http://jsfiddle.net/helderdarocha/Qc3ds/3/ – helderdarocha Mar 21 '14 at 15:37
  • 1
    @helderdarocha - this will only work in chrome, where as my answer seems to work in all the latest browsers – Pete Mar 21 '14 at 15:55
  • 1
    @helderdarocha's comment has a very important detail: **but for the full SVG**. Therefore, you have to set the filter on the svg element only. – petemyron Sep 02 '15 at 23:43

1 Answers1

11

You can add something like the following to your svg:

<filter id="drop-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
  <feOffset dx="1" dy="4" result="offsetblur"/>
  <feFlood flood-color="rgba(0,0,0,0.3)"/>
  <feComposite in2="offsetblur" operator="in"/>
  <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

and then use the following styles:

.kiwi {
  fill: #94d31b; 
  -webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
  filter: url(#drop-shadow);
}

Example

Pete
  • 57,112
  • 28
  • 117
  • 166