Svg Drop Shadow Using Css3

SVG drop shadow using css3

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.

add drop-shadow to svg polygon

You can apply the drop-shadow filter to the SVG OR use the SVG as a background of an element and apply filter to it:

polygon {  fill: #5091b9;  stroke: #4387b0;  stroke-width: 2;}.filter {  filter: drop-shadow(10px 0 5px red);}
.box {  height: 100px;  width: 100px;  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100"><g transform="translate(50, 50)"><polygon stroke="%234387b0" stroke-width="2" fill="%235091b9" points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" ></polygon></g></svg>');}

<p>SVG element</p><svg viewBox="0 0 100 100" width="100" class="filter"><g transform="translate(50, 50)" ><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" ></polygon></g></svg><p>SVG as background</p><div class="box filter"></div>

How do I add a drop shadow to an SVG path element?

Within your JSFiddle, I deleted your CSS and added a filter definition. It seems to work:

<svg width="100%" height="300px">
<defs>
       <filter id="filter1" x="0" y="0">
           <feOffset result="offOut" in="SourceAlpha" dx="-5" dy="-5" />
           <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
           <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
</defs>
<path stroke-linejoin="round" stroke-linecap="round" stroke="red" stroke-opacity="1" stroke-width="5" fill="none" class="leaflet-clickable" d="M1063 458L1055 428L1034 433L1030 421L1017 423L911 452L895 455L885 441L859 424L809 410L788 394L774 377L744 309L730 313L727 304L669 319L599 341L596 331L491 364L488 357L498 343L490 343L450 352L417 256L371 270L366 253L355 256L351 242L217 282L194 210L191 196L166 113L45 147L44 140L13 150" filter="url(#filter1)"></path>
</svg>

Maybe a few tweaks to the dx, dy, and stdDeviation values will get it just the way you want.

How to have a drop shadow on a transparent rect svg

You can't do this if the original is a fully transparent shape - because of reasons - but you can do this starting from an almost completely transparent original shape and end up with a fully transparent shape surrounded by a normal drop shadow.

Draw your shapes with 1% fill-opacity. When you pull those into a filter, multiply their alpha by 100 using a colormatrix - and use that as the basis for your dropshadow. You won't end up using the original 1% opacity shape in your final version because if you use the "out" operator - this discards the contents of anything that overlaps with the original (processed) shape.

svg {  background: #33D; }

<svg width="500px" height="400px"><defs>  <filter id="trans-shadow">  <feColorMatrix type="matrix" values="1 0 0 0 0                                        0 1 0 0 0                                        0 0 1 0 0                                        0 0 0 100 0"                                       result="boostedInput"/>                                         <feGaussianBlur stdDeviation="5"/>  <feComposite operator="out" in2="boostedInput"/>  </filter></defs>

<circle filter="url(#trans-shadow)" x="100" y="100" r="050" cx="150" cy="150" fill="black" fill-opacity="0.01" />

</svg>

How to apply drop-shadow filter via CSS to SVG specific element/path

You can apply a shadow selectively by doing color selection on the object you want to shadow, creating a shadow and then merging it under the original graphic. But you have to do it via the SVG filter trapdoor in CSS Filters - which doesn't work in IE. (So ... hacky, but possible)

Spec is here: w3.org/TR/SVG11/filters.html#feColorMatrixElement

Demo toy is here:

https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices

That matrix doubles the opacity of all red values, zeros out the opacity of everything else and then subtracts 1. The effect is to only leave things at 100% opacity that are rgb(255,0,0)

#mySVG {   filter: url(#selective-shadow);}
.shadow {  fill: red;}

<svg> <defs>   <filter id="selective-shadow">     <feColorMatrix type="matrix" values="0 0 0 0 0                                           0 0 0 0 0                                          0 0 0 0 0                                           2 0 0 0 -1"/>     <feGaussianBlur stdDeviation="3"/>     <feOffset dy="2" dx="2"/>     <feMerge>       <feMergeNode/>       <feMergeNode in="SourceGraphic"/>     </feMerge>            </filter> </defs></svg>


<svg height="150" width="150" id="mySVG">    <g><path d="M0,0 C-72,132 -72,-26 100,100"></path>    </g>    <g class="shadow" >    <circle class="shadow" cx="100" cy="100" r="20"></circle>    </g>  </svg>

How to use drop-shadow on SVG?

The problem is that your rectangle has opacity="0" so it is invisible. Change that to opacity="1" and everything is fine.

Also, z-index hdoes not work with SVG elements.`

.parent {
  width: 100%;
  max-width: 800px;
  height: auto;
  z-index: 1;
}

.child {
  transition: 0.4s;
  mix-blend-mode: lighten; /* work the best with the default black fill of svg shapes */
  cursor: pointer;
}
.child:hover {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(255, 162, 0, 0.876));
  filter: drop-shadow(3px 3px 2px rgba(255, 153, 0, 0.935));
}

<div class="parent">
  <svg version="1.1" viewBox="0 0 735 916">
    <image width="735" height="916" href="https://i.stack.imgur.com/PETyU.jpg"></image>
    <a href="/">
      <rect
        class="child"
        x="539"
        y="642"
        fill="#000"
        opacity="1"
        width="166"
        height="174"
      ></rect>
    </a>
  </svg>
</div>

How do I create a svg drop shadow?

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>

How to add shadow effect along diagonal of SVG in HTML/CSS?

You can use filter: drop-shadow() on the triangle svg path. It's only not supported in IE11 and opera mini.

.shadow {
  filter: drop-shadow(3px 15px 20px rgb(0 0 0 / 1));
}

<svg viewBox="0 0 436 217" style="background-color: blue; height: 28px; width: 100%;" preserveAspectRatio="none" class="Tagline-triangle" fill="#ff0000" xmlns="http://www.w3.org/2000/svg">
  <path class="shadow" d="M0 0H436V217L0 0Z"></path>
</svg>

Adding a shadow to an SVG on the one whole side

One thing you can try is using SVG filters to make your own drop shadow instead of using CSS, which will give you more control.

<div class="relative h-32 bg-blue-500">
<svg class="w-full h-20 block fill-current text-white overflow-visible" viewBox="0 0 100 100" preserveAspectRatio="none">
  <defs>
    <filter id="shadow" x="0" y="0" width="100%" height="120%">
      <feOffset result="offOut" in="SourceAlpha" dx="0" dy="5" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <polygon points="-20,-20 100,0 120,120" filter="url(#shadow)"/>
</svg>

In this approach you will also want to make the div wrapped around the SVG taller than the SVG itself to allow room for the shadow and extend the points of the polygon beyond the width of the SVG viewbox to prevent the shadow from getting 'thinner' less visible at the edges and last but not least make the SVG overflow-visible. Here is a Tailwind Play demo https://play.tailwindcss.com/PIjX1eV0lz

Svg Drop Shadow Using Css3