SVG drop shadow using css3

Asked 22/5, 2011 at 14:5 Answered 22/4, 2021 at 3:26

510

Is it possible to set drop shadow for an svg element using css3, something like

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

I saw some remarks on creating shadow using filter effects. Is there an example of using CSS alone. Below is a working code where the cursor style is correctly applied, but no shadow effect. How can I get the shadow effect with the least bit of code?

svg .shadow { 
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">  
    <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

Dodgson answered 22/5, 2011 at 14:5 Comment(0)

412

Here's an example of applying dropshadow to some svg using the 'filter' property. If you want to control the opacity of the dropshadow have a look at this example. The slope attribute controls how much opacity to give to the dropshadow.

Relevant bits from the example:

<filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>

Box-shadow is defined to work on CSS boxes (read: rectangles), while svg is a bit more expressive than just rectangles. Read the SVG Primer to learn a bit more about what you can do with SVG filters.

Fulsome answered 23/5, 2011 at 8:29 Comment(18)

Is there a way of controlling the opacity of the dropshadow? – Myongmyopia 20/3, 2012 at 21:55

@HughGuiney: yes, of course. Here's an example of one way of doing that, xn--dahlstrm-t4a.net/svg/filters/…. Just vary the slope attribute to tweak how much opacity you want. – Newsy 21/3, 2012 at 9:5

Note that Internet Explorer and Safari do not support SVG filters yet: w3schools.com/svg/svg_feoffset.asp – Dunsany 3/7, 2012 at 7:59

@LorenzoPolidori IE10 and Safari 5.2 both support SVG filters. – Newsy 3/7, 2012 at 8:4

Fair enough, though I still have Safari 5.1 on my Mac and the Safari version on my iPad2 with the latest iOS 5.1.1 does not support it either. If you need it for earlier versions of Safari, a good alternative is the style attribute -webkit-svg-shadow. – Dunsany 3/7, 2012 at 8:31

Note that there is no XML node nesting apart from feMergeNode being inside feMerge. The indentation in the code is a bit misleading - I thought feOffset and feMerge were child nodes of feGaussianBlr. – Faulk 2/1, 2013 at 7:10

This filter appears to render vertical lines invisible. – Decline 5/4, 2014 at 16:26

@VectorGorgoth post a new question please, but in general I think that just happens because of the zero bbox width for a straight vertical line (and the filter is relative to the bbox in the example here). See last paragraph of w3.org/TR/SVG11/coords.html#ObjectBoundingBoxUnits. – Newsy 7/4, 2014 at 13:19

I can figure a workaround; I just was informing you (and others) of my observation. It even occurs when the stroke width is, say, 3. – Decline 7/4, 2014 at 15:1

@VectorGorgoth right, stroke doesn't affect the default (filled) boundingbox. We're extending this in SVG2, but you'd still probably need to opt in for it to be computed relative to e.g the stroked boundingbox. – Newsy 7/4, 2014 at 15:18

Example on how to implement this approach in D3.js: bl.ocks.org/cpbotha/5200394 – Noelianoell 24/9, 2014 at 11:10

PLEASE Anyone can help me , please add shadow for this svg jsfiddle.net/8fx3p4zo @ErikDahlström Its very urgent for me I tried lot but i couldn't solution – Koph 22/12, 2014 at 12:28

@Koph this particular solution is for putting the filter inside the svg, if you want to apply this from outside see e.g the answer below, here's one way of doing it: jsfiddle.net/ym35zed1. – Newsy 22/12, 2014 at 13:3

@ErikDahlström Really thanks its working , but I don't know how it work on mozilla ? "-moz-filter" its not working for me – Koph 6/1, 2015 at 10:43

Thanks but my mozilla not supporting , version is 34.0.5 @ErikDahlström – Koph 8/1, 2015 at 10:48

@Koph please post a new (and more specific) question re firefox support instead (or file a moz bugreport), this comment thread is already way too long. – Newsy 8/1, 2015 at 12:6

How do you add color to the shadow? – Isobath 12/1, 2015 at 17:54

@Costa see e.g https://mcmap.net/q/75171/-svg-color-of-the-shadow – Newsy 13/1, 2015 at 9:40

807

Use the CSS filter property.

Supported by webkit browsers, Firefox 34+ and Edge.

You can use this polyfill that will support FF < 34, IE6+.

You would use it like so:

/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */

.shadow {
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  /* Similar syntax to box-shadow */
}

<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Star_wars2.svg" alt="" class="shadow" width="200">

<!-- Or -->

<svg class="shadow" ...>
  <rect x="10" y="10" width="200" height="100" fill="#bada55" />
</svg>

<!-- Or -->

<svg>
  <g fill="none" stroke="#decade" stroke-width="2" transform="scale(2)">
    <circle class="shadow" cx="20" cy="20" r="19"/>
    <path class="shadow" d="M 20,1 V 39"/>
    <path class="shadow" d="M 20,1 V 20" transform="rotate(135, 20, 20)"/>
    <path class="shadow" d="M 20,1 V 20" transform="rotate(225, 20, 20)"/>
  </g>
</svg>

This approach differs from the css box-shadow effect in that it accounts for opacity and does not apply the drop shadow effect to the box but rather to the outline of the svg element itself.

NOTE: This approach used to work when the class was placed on the <svg> element alone. You can now use this on an inline svg element such as <rect>.

Read more about css filters here.

Desiree answered 29/11, 2012 at 11:12 Comment(23)

This appears to work for images, or for the whole svg, but for selections inside the svg. the fiddle – Titled 8/4, 2013 at 21:25

Using filter: drop-shadow() or box-shadow in webkit is the same for svg element. Still no solution for inner elements. – Autumn 21/1, 2014 at 15:5

@Titled Not sure what you mean by that comment? See example here: jsbin.com/dipusemiye – Desiree 14/12, 2014 at 8:57

@Desiree in your example the filter is applied to the whole image, what @Autumn is trying to do is applying it to an element inside an SVG, like a g or a path. – Frippery 24/4, 2015 at 14:29

Open up your svg file and add a class to your g or path element. – Desiree 22/6, 2015 at 11:11

Perfect, work with <img> and background-image :) – Coterminous 11/7, 2015 at 18:2

Perfect answer. And it's support by almost all browsers except the ever stupid IE9- Checkout here for more caniuse.com/#search=svg%20filters Also take a look at the resources tab for some cool examples. – Fara 17/9, 2015 at 11:24

This doesn't work for applying drop-shadows to svg elements in any way. do not use it. Example of failure: jsbin.com/bepurahuwa/1/edit?html,css,js,output – Pietrek 24/10, 2015 at 6:1

@AndyRay works like a charm... jsbin.com/peviso/edit?html,css,js,output. You put the class on the <svg> tag. – Desiree 25/10, 2015 at 7:18

@Desiree yes, it does work like that. The real problem comes when you need too apply filter to an element, but not to others. – Eweneck 9/12, 2015 at 12:47

I guess both @AndyRay and hitautodestruct are right, because as pointed out here, this looks like a Chrome rendering issue: Firefox is rendering correctly the filter on SVG specific elements. – Broddie 25/12, 2015 at 6:10

Does NOT work with current Chrome version ( 54.0.2840). If you use images (as stated in other comments) it works, but not for a <rect> or <circle>. – Injunction 22/11, 2016 at 14:1

@Injunction I'm using Chrome (54.0.2840.98) OSx. Just made a quick test with <rect> and it seems to work – Desiree 23/11, 2016 at 9:35

@Desiree I tried using this jsfiddle: link. What am I doing wrong? – Injunction 24/11, 2016 at 10:3

@Injunction You put the class directly on the <rect class="shadow"> element. The class should be on the svg <svg class="shadow">. – Desiree 24/11, 2016 at 12:3

@Desiree ah! that explains it. Not an option for me, as I do not want everything to have a shadow. But thank you for your support. – Injunction 25/11, 2016 at 7:43

Correct. Only works for the whole svg element. The svg should also not have a background color. if it does, the shadow will become just a rectangle. – Desalinate 6/2, 2017 at 23:19

The answer states that the -webkit-filter setting is only needed for iOS < 9.3, but I found I needed to use it for my Cordova app running on 10.3.3. If I just used filter my app would crash after a couple of minutes. Perhaps Cordova uses an older webkit version by default. – Exponent 12/12, 2017 at 15:40

@hitautodestruct, in reality it is not correct that you need to add the class to the SVG tag only; in the following demo I added two different classes to generate different drop-shadows for the "text" and the "path" tags of a svg generated dynamically: codepen.io/ChemBioScripting/pen/wEXrjB – Fungal 18/9, 2018 at 23:16

@AndyRay, take a look a this demo (codepen.io/ChemBioScripting/pen/wEXrjB): I added different classes to "path" and "text" of a SVG. In the code I commented another alternative way that does not use the classes – Fungal 18/9, 2018 at 23:18

Using css filter drop-shadow seems to set the element to relative and you are unable to change it. – Grebe 18/12, 2018 at 2:45

FYI, the posted code works for me on a Font Awesome icon (in Elementor) which is vector-based (and I'll assume it uses SVG); the shadow follows all the edges of the symbol. – Glaucescent 11/1, 2019 at 18:8

This is masterful! I succesfully used this on a toolbar that has SVGs only on the side... The filter followed the entire shape (on the container of course) perfectly. Thanks! – Marna 24/9, 2021 at 20:27

412

Relevant bits from the example:

<filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>