3

I have a drop shadow effect that I am applying using the following css:

-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));

Does anyone know what the equivalent for this is for the other browsers.

Please note I can't use box-shadow: 0 1px 10px rgba(113,158,206,0.8) as this won't apply the shadow effect around the css arrow part of the shape

Fiddle

Pete
  • 57,112
  • 28
  • 117
  • 166
  • This is a webkit only property so there isn't an equivalent. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility – donnywals Jan 15 '14 at 09:43
  • @donnywals there is an svg filter equivalent for opera and firefox but nothing for ie – Pete Jan 15 '14 at 10:20
  • 1
    Cross-browser answer is given in this related question: http://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css – psdie Oct 27 '14 at 09:33
  • @psdie wow, I searched for ages trying to find an answer like that. Thanks, please vote to close as duplicate – Pete Oct 27 '14 at 10:52
  • Does this answer your question? [Drop shadow for PNG image in CSS](https://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css) – psdie Jul 14 '20 at 22:46

2 Answers2

6

Ok I have figured this out - the equivalent for opera and firefox is:

filter: url(drop-shadow.svg#drop-shadow);

where drop-shadow.svg looks like this:

<svg height="0" xmlns="http://www.w3.org/2000/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>
</svg>

IE being so crap doesn't support the svg values feOffset, feFlood or feMerge so doesn't currently have an equivelant

I'll leave this open in-case anyone figures out how to do this effect for IE

UPDATE

Thanks to psdie for finding this post

IE Version:

-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color='#444')";
Pete
  • 57,112
  • 28
  • 117
  • 166
2

Looks like Firefox now supports the non-prefixed dropshadow filter.
Confirmed in FF 43.0.4 on OS X MDN documentation: filter - CSS - MDN

Bobby Fritze
  • 182
  • 1
  • 8