CSS3 filter: drop-shadow spread property alternatives

Question

I\'m trying to use a CSS3 (webkit) drop-shadow filter to place a white glow around any given transparent png with approximately the same dimensions, and -webkit-filter

Answer 1

Another way to achieve the the feeling of spread is use multiple drop-shadow filters.

filter:  
  drop-shadow(1px 1px 2px white)
  drop-shadow(-1px -1px 2px white)
  drop-shadow(1px -1px 2px white)
  drop-shadow(-1px 1px 2px white)
  drop-shadow(1px 0px 2px white) 
  drop-shadow(-1px 0px 2px white)  
  drop-shadow(0px 1px 2px white) 
  drop-shadow(0px -1px 2px white);

This results in a hard white border with a normal softer dropshadow behind it. Stacking more of the same color can give the desired results as the original question.

Answer 2

Well, I figured out how to replace the non-functioning spread property using SVG filters. Big thanks to Michael Mullany though his answer wasn't 100% what I need. Here's the filter I'm using:

<filter id="drop-shadow">
    <feMorphology operator="dilate" radius="6" in="SourceAlpha" result="dilated"/>

    <feGaussianBlur stdDeviation="3" in="dilated" result="blurred"/>

    <feFlood flood-color="rgba(255,255,255,0.5)" in="blurred" result="flooded"/>

    <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

feMorphology dilate operator replicates the functionality I wanted very nicely, making it easier to give the text a 'glow' effect that conforms a lot more strictly to the outline of the text.

(Oddly, feFlood does nothing and I'm unable to get a white glow, but that's a problem for another question. The filter also eats up 100% of a single core as long as it's open in a tab in the latest Chrome. Oh well.)

Answer 3

Drop shadow on text (with your 22px) will never look good, as the text and letter spacing are much closer. If using text, you should use text-shadow (or maybye text-stroke is also an alternative for you, see my demo):

http://jsfiddle.net/fHzX7/

Answer 4

Yes, you can use an SVG filter to customize your shadow spread:

  <filter id="f1" x="-20%" y="-20%" width="160%" height="160%">
    <feGaussianBlur in="SourceAlpha" result="blurOut" stdDeviation="8"/>
    <feOffset in="blurOut" result="dropBlur" dx="0" dy="0"/>

  <feComponentTransfer in="dropBlur" result="dropBlur2">
    <feFuncA id="alphaFunc" type="gamma" amplitude="2" exponent="1.5" offset="0"/>
  </feComponentTransfer>

    <feComposite operator="over" 
     in="SourceGraphic" in2="dropBlur2"/>
</filter>

Interactive demo here: http://codepen.io/mullany/pen/sJopz