How can I create a "glow" around a rectangle with svg?

Question

I have something like the following:

<svg id="svgLogo1" style="left:0; top:0; position:absolute"
        width="980" height="80" viewBox="0 0 980 80" 
        xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="5" width="980" height="54" rx="6" ry="6" 
            style="stroke-width:2; xstroke:#FFF; fill:#555"/>
</svg>

I would like to create a white glow around this.

Is there some way that I can do this in svg. I looked around and all I can find is "shadow" which is not really what I am looking for as I want a shadow (Glow) around all four sides of the rectangle.

Bifrost

Is adding 2 shadows an option for you? One for right and bottom, the other for top and left? – Teach

https://mcmap.net/q/73891/-svg-drop-shadow-using-css3 – Orthostichy

Thanks for the suggestions. The problem is that I cannot see how to create a white shadow. I have lots of success at creating black but not white. – Bifrost

a shadow with no x, y offset can look like a glow... – Barramunda

Answer 1

Here are some filters that provide different types of effect:

• Drop shadow (transparent black shadow with slight offset)
• Black glow (with a fixed colour)
• Object-coloured glow (takes the colour of the object to which it is a applied)

An example:

There's a demo here.

The code:

<!-- a transparent grey drop-shadow that blends with the background colour -->
<filter id="shadow" width="1.5" height="1.5" x="-.25" y="-.25">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
    <feColorMatrix result="bluralpha" type="matrix" values=
            "1 0 0 0   0
             0 1 0 0   0
             0 0 1 0   0
             0 0 0 0.4 0 "/>
    <feOffset in="bluralpha" dx="3" dy="3" result="offsetBlur"/>
    <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

<!-- a transparent grey glow with no offset -->
<filter id="black-glow">
    <feColorMatrix type="matrix" values=
                "0 0 0 0   0
                 0 0 0 0   0
                 0 0 0 0   0
                 0 0 0 0.7 0"/>
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

<!-- a transparent glow that takes on the colour of the object it's applied to -->
<filter id="glow">
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

Worsted

transparent glow that takes on the colour of the object it's applied to. Neon light vibes. This is the perfect glow effect for me. Thanks! – Frieda

Answer 2

Colour matrices can't really be used to make things glow a different colour, only transform the existing colour in some way.

But we can do something like this instead...

<filter id="white-glow">
    <feFlood result="flood" flood-color="#ffffff" flood-opacity="1"></feFlood>
    <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
    <feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
    <feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
    <feMerge>
        <feMergeNode in="blurred"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>

See this fiddle I made, based on Drew's answer.

Here's a breakdown of what the filter does:

• Combine a flood fill with the source to colour it in (feFlood and feComposite).
• Expand this coloured object a little (feMorphology with operator="dilate")
• Apply our good old blur effect to make it glow! (feGaussianBlur)
• Stick this coloured, expanded, glowy object under the source (feMerge)

Cecilla

if the fill for the rect uses alpha channel like "rgba(3,3,3,0.9)", the shadow modifies the color of the rect. Is there a way I can avoid this? – Erasmo

You can add another 'feComposite' step to get rid of any pixels of the glow that are underneath the original object. I made you a fiddle :) jsfiddle.net/4nz8o1p8 – Cecilla

Hover over the objects in that fiddle to apply the glow - you'll see that their colour doesn't change :) – Cecilla

the additional 'feComposite' does not seem to work in firefox and safari though. – Erasmo

Ahh that's annoying! Not sure how to fix that one I'm afraid :/ – Cecilla

Answer 3

Try this:

<svg id="svgLogo1" style="left: 0px; top: 0px;
  position: absolute;" width="980" height="80" viewBox="0 0 980 80"
  xmlns="http://www.w3.org/2000/svg" version="1.1" >
    <defs>
        <filter id="dropGlow" width="1.5" height="1.5" x="-.25" y="-.25">
            <feGaussianBlur id="feGaussianBlur5384" in="SourceAlpha" stdDeviation="15.000000" result="blur"/>
            <feColorMatrix id="feColorMatrix5386" result="bluralpha" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 0.800000 0 "/>
            <feOffset id="feOffset5388" in="bluralpha" dx="0.000000" dy="0.000000" result="offsetBlur"/>
            <feMerge id="feMerge5390">
                <feMergeNode id="feMergeNode5392" in="offsetBlur"/>
                <feMergeNode id="feMergeNode5394" in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <rect x="0" y="5" width="980" height="54" rx="6" ry="6"
        style="stroke-width: 2; xstroke: #FFFFFF; fill: #555555; filter:url(#dropGlow)"/>
</svg>

I created the original filter in Inkscape, but it works just as well on whatever it's applied to.

Vitiligo

+1 for mentioning Inkscape. I tried the supplied svg and it didn't work though – Marcmarcano

Answer 4

If you're using a blur filter, exercise a bit of caution. Blur in particular can be costly in terms of CPU resources. It therefore may consume battery faster, too. Use a tool (e.g., the OS X Activity Monitor) to observe the effect your filters have, especially if animation or video is involved.

Desmid