SVG drop shadow using css3

Question

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 cusor style is correctly applied  but no shadow effect  Please help me to get the shadow effect with least bit of code    x000D   x000D  svg  shadow    x000D    cursor crosshair   x000D    -moz-box-shadow  -5px -5px 5px  888  x000D    -webkit-box-shadow  -5px -5px 5px  888  x000D    box-shadow  -5px -5px 5px  888   x000D     x000D   lt 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  gt   x000D       lt rect class  shadow  x  10  y  10  width  100  height  50  fill   c66    gt  x000D   lt  svg gt  x000D   x000D   x000D

User · Answer

You can easily add a drop-shadow effect to an svg-element using the drop-shadow() CSS function and rgba color values. By using rgba color values you can change the opacity of your shadow.

_x000D_

img.light-shadow{_x000D_
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));_x000D_
}_x000D_
_x000D_
img.dark-shadow{_x000D_
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1));_x000D_
}

_x000D_

<img class="light-shadow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />_x000D_
<img class="dark-shadow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />

_x000D_

User · Answer

I m not aware of a CSS-only solution    As you mentioned  filters are the canonical approach to creating drop shadow effects in SVG  The SVG specification includes an example of this

User · Answer

Easiest way I ve found is with feDropShadow   lt filter id  quot shadow quot  x  quot 0 quot  y  quot 0 quot  width  quot 200  quot  height  quot 200  quot  gt     lt feDropShadow dx  quot 40 quot  dy  quot 40 quot  stdDeviation  quot 35 quot  flood-color  quot  ff0000 quot  flood-opacity  quot 1 quot    gt   lt  filter gt   On the element   lt path d  quot     quot  filter  quot url  shadow  quot   gt

User · Answer

Use the new CSS filter property   Supported by webkit browsers  Firefox 34  and Edge   You can use this polyfill that will support FF  lt  34  IE6    You would use it like so    x000D   x000D     Use -webkit- only if supporting  Chrome  lt  54  iOS  lt  9 3  Android  lt  4 4 4    x000D   x000D   shadow   x000D    -webkit-filter  drop-shadow  3px 3px 2px rgba 0  0  0   7    x000D    filter  drop-shadow  3px 3px 2px rgba 0  0  0   7    x000D       Similar syntax to box-shadow    x000D    x000D   lt img src  https   upload wikimedia org wikipedia commons c ce Star wars2 svg  alt    class  shadow  width  200  gt  x000D   x000D   lt  -- Or -- gt  x000D   x000D   lt svg class  shadow      gt  x000D       lt rect x  10  y  10  width  200  height  100  fill   bada55    gt  x000D   lt  svg gt  x000D   x000D   x000D    This approach differs from the box-shadow effect in that it accounts for opacity and does not apply the drop shadow effect to the box but rather to the corners of the svg element itself   Please Note  This approach only works when the class is placed on the  lt svg gt  element alone  You can NOT use this on an inline svg element such as  lt rect gt     lt  -- This will NOT work  -- gt   lt svg gt  lt rect class  shadow        gt  lt  svg gt    Read more about css filters on html5rocks

User · Answer

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    lt filter id  dropshadow  height  130   gt     lt feGaussianBlur in  SourceAlpha  stdDeviation  3   gt   lt  -- stdDeviation is how much to blur -- gt     lt feOffset dx  2  dy  2  result  offsetblur   gt   lt  -- how much to offset -- gt     lt feComponentTransfer gt       lt feFuncA type  linear  slope  0 5   gt   lt  -- slope is the opacity of the shadow -- gt     lt  feComponentTransfer gt     lt feMerge gt        lt feMergeNode  gt   lt  -- this contains the offset blurred image -- gt       lt feMergeNode in  SourceGraphic   gt   lt  -- this contains the element that the filter is applied to -- gt     lt  feMerge gt   lt  filter gt   lt circle r  10  style  filter url  dropshadow    gt    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

User · Answer

Probably an evolution  it appears that inline css filters works nicely on elements  in a certain way  Declaring a drop-shadow css filter  in an svg element  in both a class or inline does NOT works  as specified earlier  But  at least in Firefox  with the following wizardry  Appending the filter declaration inline  with javascript  after DOM load   x000D   x000D     Does not works  with regular dynamic css styling   shadow0 oninput        gt      rect1 style filter    filter drop-shadow 0 0     shadow0 value    rem black          Okay  Inline styling  appending   shadow1 oninput        gt      rect1 style       filter drop-shadow 0 0     shadow1 value    rem black      rect2 style       filter drop-shadow 0 0     shadow1 value    rem black      x000D   lt h2 gt Firefox only lt  h2 gt   lt h4 gt  Does not works    lt input id  shadow0  type  number  min  0  max  100  step  0 1  gt      Okay   lt input id  shadow1  type  number  min  0  max  100  step  0 1  gt    lt svg viewBox  0 0 120 70  gt         lt rect id  rect1  x  10  y  10  width  100  height  50  fill   c66    gt            lt  -- Inline style declaration does NOT works at svg level  no shadow at loading  -- gt       lt rect id  rect2  x  40  y  30  width  10  height  10  fill   aaa  style  filter drop-shadow 0 0 20rem black     gt        lt  svg gt  x000D   x000D   x000D

User · Answer

Black text with white shadow  Another way  I used for white shadow  on text   create a clone for shadow   Note  This require xmlns xlink  http   www w3 org 1999 xlink  at SVG declaration   Real text value is located in  lt defs gt  section  with position and style  but without a fill definition   The text is cloned two times  first for shadow and second for the text itself    x000D   x000D   lt svg xmlns  http   www w3 org 2000 svg  width  640  height  70  x000D      xmlns xlink  http   www w3 org 1999 xlink  gt  x000D     lt defs gt  x000D     lt filter id  Blur  gt  lt feGaussianBlur stdDeviation  0 8    gt  lt  filter gt  x000D     lt text style  font-family sans helvetica font-weight bold font-size 12pt  x000D        id  Text  gt  lt tspan x  12  y  19  gt  x000D          Black text with white shadow x000D       lt  tspan gt  lt  text gt  x000D     lt  defs gt  x000D     lt rect style  fill  8AB  width  640  height  70    gt  x000D     lt use style  fill white   filter  url  Blur   xlink href   Text  x000D        transform  translate 1 8  9    gt  x000D     lt use style  fill black   xlink href   Text   gt  x000D   lt  svg gt  x000D   x000D   x000D    More distant shadow with biggest value as blur deviation    x000D   x000D   lt svg xmlns  http   www w3 org 2000 svg  width  640  height  70  x000D      xmlns xlink  http   www w3 org 1999 xlink  gt  x000D     lt defs gt  x000D     lt filter id  Blur  gt  lt feGaussianBlur stdDeviation  3    gt  lt  filter gt  x000D     lt text style  font-family sans helvetica font-weight bold font-size 12pt  x000D        id  Text  gt  lt tspan x  12  y  19  gt  x000D          Black text with white shadow x000D       lt  tspan gt  lt  text gt  x000D     lt  defs gt  x000D     lt rect style  fill  8AB  width  640  height  70    gt  x000D     lt use style  fill white   filter  url  Blur   xlink href   Text  x000D        transform  translate 7 5    gt  x000D     lt use style  fill black   xlink href   Text   gt  x000D   lt  svg gt  x000D   x000D   x000D    You can use this same approach with regular SVG objects   With same requirement  No fill definition at  lt defs gt  section    x000D   x000D   lt svg xmlns  http   www w3 org 2000 svg  width  364  height  172  x000D      xmlns xlink  http   www w3 org 1999 xlink  gt  x000D     lt defs gt  x000D       lt filter id  Blur  gt  lt feGaussianBlur stdDeviation  0 8    gt  lt  filter gt  x000D       lt g transform  matrix  7 0 0  7 -117 450795 -335 320895   id  Img  gt  x000D           lt g transform  matrix 12 997776 0 0 -12 997776 389 30313 662 04015   gt  x000D               lt path d  m 0 0 -1 107 0 c -0 039 0 -0 067 0 044 -0 067 0 086 0 0 015 0 589 1 914 0 589 1 914 0 021 0 071 0 023 0 073 0 031 0 073 l 0 001 0 c 0 009 0 0 01 -0 002 0 031 -0 073 0 0 0 589 -1 899 0 589 -1 914 C 0 067 0 044 0 037 0 0 0 M 1 493 4 345 C 1 482 4 383 1 448 4 411 1 408 4 414 l -4 065 0 C -2 698 4 41 -2 731 4 383 -2 742 4 346 c 0 0 -2 247 -7 418 -2 247 -7 432 0 -0 037 0 029 -0 067 0 067 -0 067 l 2 687 0 c 0 021 0 008 0 037 0 028 0 042 0 051 l 0 313 1 c 0 01 0 025 0 033 0 042 0 061 0 043 l 2 479 0 002 c 0 027 -0 002 0 051 -0 021 0 061 -0 045 l 0 32 -1 c 0 005 -0 023 0 021 -0 044 0 042 -0 052 0 0 2 642 10e-4 2 644 10e-4 0 037 0 0 068 0 028 0 068 0 065 0 0 013 -2 302 7 433 -2 302 7 433    gt  x000D           lt  g gt  x000D           lt g transform  matrix 12 997776 0 0 -12 997776 508 27177 644 93113   gt  x000D               lt path d  m 0 0 -1 651 -0 001 c 0 0 -0 044 0 013 -0 044 0 063 l -10e-4 0 833 c 0 0 05 0 044 0 063 0 044 0 063 l 1 514 0 C 0 038 0 958 0 394 0 87 0 394 0 463 0 394 0 056 0 0 0 0 m 7 916 0 645 3 741 0 0 2 453 -4 81 0 C 6 397 3 098 5 764 2 866 5 401 2 597 5 038 2 328 4 513 1 715 4 513 0 87 c 0 -0 845 0 513 -1 502 0 513 -1 502 0 263 -0 326 0 925 -1 005 0 925 -1 005 0 015 -0 016 0 024 -0 037 0 024 -0 061 0 -0 051 -0 041 -0 092 -0 092 -0 092 l -3 705 0 c -0 451 0 002 -0 482 0 181 -0 482 0 207 0 0 046 0 056 0 075 0 056 0 075 0 169 0 081 0 514 0 35 0 514 0 35 0 732 0 57 0 82 1 352 0 82 1 771 0 0 42 -0 063 1 163 -0 814 1 814 C 1 521 3 078 0 57 3 096 0 57 3 096 l -5 287 0 c 0 0 0 -7 52 0 -7 522 0 -0 024 0 022 -0 043 0 046 -0 043 l 2 943 0 0 2 11 c 0 0 037 0 057 0 0 057 0 l 1 533 -1 54 c 0 545 -0 551 1 446 -0 57 1 446 -0 57 l 5 796 0 001 c 0 989 0 1 539 0 538 1 69 0 688 0 15 0 151 0 651 0 714 0 651 1 647 0 0 932 -0 426 1 409 -0 608 1 628 C 8 675 -0 309 8 029 0 375 7 894 0 517 7 878 0 53 7 868 0 55 7 868 0 572 c 0 0 033 0 019 0 064 0 048 0 073    gt  x000D           lt  g gt  x000D           lt g transform  matrix 12 997776 0 0 -12 997776 306 99861 703 01559   gt  x000D               lt path d  m 0 0 c 0 02 0 0 034 0 014 0 04 0 036 0 0 2 277 7 479 2 277 7 486 0 0 02 -0 012 0 042 -0 031 0 044 0 0 -2 805 0 -2 807 0 -0 014 0 -0 023 -0 011 -0 026 -0 026 0 -0 001 -0 581 -1 945 -0 581 -1 946 -0 004 -0 016 -0 012 -0 026 -0 026 -0 026 -0 014 0 -0 026 0 014 -0 028 0 026 L -1 79 7 541 c -0 002 0 013 -0 012 0 025 -0 026 0 025 -10e-4 0 -3 1 0 001 -3 1 0 001 -0 009 -0 002 -0 017 -0 01 -0 02 -0 018 0 0 -0 545 -1 954 -0 545 -1 954 -0 003 -0 017 -0 012 -0 027 -0 027 -0 027 -0 013 0 -0 024 0 01 -0 026 0 023 l -0 578 1 952 c -0 001 0 012 -0 011 0 022 -0 023 0 024 l -2 992 0 c -0 024 0 -0 044 -0 02 -0 044 -0 045 0 -0 004 10e-4 -0 012 10e-4 -0 012 0 0 2 31 -7 471 2 311 -7 474 C -6 853 0 014 -6 839 0 -6 819 0 c 0 003 0 2 485 -0 001 2 485 -0 001 0 015 0 002 0 03 0 019 0 034 0 037 10e-4 0 0 865 2 781 0 865 2 781 0 005 0 017 0 012 0 027 0 026 0 027 0 015 0 0 023 -0 012 0 027 -0 026 L -2 539 0 024 C -2 534 0 01 -2 521 0 -2 505 0 -2 503 0 0 0 0 0    gt  x000D           lt  g gt  x000D           lt g transform  matrix 12 997776 0 0 -12 997776 278 90126 499 03369   gt  x000D               lt path d  m 0 0 c -0 451 0 -1 083 -0 232 -1 446 -0 501 -0 363 -0 269 -0 888 -0 882 -0 888 -1 727 0 -0 845 0 513 -1 502 0 513 -1 502 0 263 -0 326 0 925 -1 01 0 925 -1 01 0 015 -0 016 0 024 -0 037 0 024 -0 06 0 -0 051 -0 041 -0 093 -0 092 -0 093 -0 008 0 -6 046 0 -6 046 0 l 0 -2 674 7 267 0 c 0 988 0 1 539 0 538 1 69 0 689 0 15 0 15 0 65 0 713 0 65 1 646 0 0 932 -0 425 1 414 -0 607 1 633 -0 162 0 196 -0 808 0 876 -0 943 1 017 -0 016 0 014 -0 026 0 034 -0 026 0 056 0 0 033 0 019 0 063 0 048 0 073 l 3 5 0 0 -5 114 2 691 0 0 5 101 3 267 0 0 2 466 L 0 0 Z    gt  x000D           lt  g gt  x000D           lt g transform  matrix 12 997776 0 0 -12 997776 583 96822 539 30215   gt  x000D               lt path d  m 0 0 -1 651 -0 001 c 0 0 -0 044 0 013 -0 044 0 063 l -10e-4 0 833 c 0 0 05 0 044 0 063 0 044 0 063 l 1 514 0 C 0 038 0 958 0 394 0 87 0 394 0 463 0 394 0 056 0 0 0 0 m 2 178 -1 79 c -0 45 0 002 -0 482 0 181 -0 482 0 207 0 0 046 0 056 0 075 0 056 0 075 0 169 0 081 0 514 0 35 0 514 0 35 0 732 0 57 0 82 1 352 0 82 1 771 0 0 42 -0 063 1 163 -0 814 1 814 C 1 521 3 078 0 57 3 098 0 57 3 098 l -5 287 0 c 0 0 0 -7 522 0 -7 524 0 -0 024 0 022 -0 043 0 046 -0 043 0 005 0 2 943 0 2 943 0 l 0 2 109 c 0 0 038 0 057 0 0 057 0 l 1 533 -1 539 c 0 545 -0 551 1 446 -0 57 1 446 -0 57 l 4 525 0 0 2 679 -3 655 0 z    gt  x000D           lt  g gt  x000D           lt g transform  matrix 12 997776 0 0 -12 997776 466 86346 556 40203   gt  x000D               lt path d  m 0 0 -1 107 0 c -0 041 0 -0 067 0 044 -0 067 0 086 0 0 016 0 589 1 914 0 589 1 914 0 021 0 071 0 027 0 073 0 031 0 073 l 0 001 0 c 0 004 0 0 01 -0 002 0 031 -0 073 0 0 0 589 -1 898 0 589 -1 914 C 0 067 0 044 0 04 0 0 0 M 1 49 4 347 C 1 479 4 385 1 446 4 412 1 405 4 414 l -4 065 0 C -2 7 4 412 -2 734 4 385 -2 745 4 348 c 0 0 -2 245 -7 42 -2 245 -7 434 0 -0 037 0 03 -0 067 0 067 -0 067 l 2 687 0 c 0 022 0 007 0 038 0 028 0 043 0 051 l 0 313 1 001 c 0 01 0 024 0 033 0 041 0 061 0 042 l 2 478 0 C 0 687 -2 061 0 71 -2 078 0 721 -2 102 l 0 32 -1 c 0 005 -0 023 0 021 -0 044 0 042 -0 052 0 0 2 642 10e-4 2 644 10e-4 0 037 0 0 067 0 028 0 067 0 066 0 0 012 -2 304 7 434 -2 304 7 434    gt  x000D           lt  g gt  x000D       lt  g gt  x000D     lt  defs gt  x000D     lt rect style  fill  8AB  width  364  height  172    gt  x000D     lt use style  fill white   filter  url  Blur   xlink href   Img  x000D      transform  translate 1 8  9    gt  x000D     lt use style  fill black   xlink href   Img   gt  x000D   lt  svg gt  x000D   x000D   x000D

[html] SVG drop shadow using css3

Examples related to html

Examples related to css

Examples related to svg

Examples related to svg-filters