rw-nandemo rw-nandemo - 5 months ago 41
CSS Question

CSS3 filter: drop-shadow spread property alternatives

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: drop-shadow(0px 0px 22px rgba(255,255,255,0.8));
is working great for solid images. The problem is that it mangles images that are primarily text somewhat horribly. All the shadows blend together instead of creating a proper tight glow effect.

enter image description here

I need to be able to use spread instead of blur so that the shadows don't just become a big blob behind some of the text, but apparently while the standard says that you should be able to specify a spread property, you still can't.

I've heard that SVG drop shadow filter can be used to achieve the same effect as drop-shadow (and in fact must be used in Firefox) but I haven't been able to find a way to apply a spread property to that either.

What kind of workarounds exist for this problem, if any?


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"/>

        <feMergeNode in="SourceGraphic"/>

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.

enter image description here

(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.)