I've seen a million tutorials to make outer glow effects using some combination of feGaussianBlur, feFlood and dilating either SourceGraphic or SourceAlpha. They work pretty well but aren't exactly what I need.

I've been trying to find a way (as well as experimenting on my own, unsuccessfully) for a way to make an outer glow effect colored with a linear gradient. Is this possible in SVG? I've tried using feImage but either I'm doing it wrong or it just can't be done.

  • Since you have outlined methods that dont work exactly as you want and not described what you exactly want answer is: No. Otherwise it would be yes.
    – joojaa
    Commented Nov 28, 2018 at 4:41
  • Can you give more details on the code that you are working on? Maybe share an example? Also this may relate to your question.
    – felixhu
    Commented Nov 28, 2018 at 10:05
  • 1
    I want a glow similar to what @Socowi answered. I managed to get it working finally thanks to someone in #svg; Seems my main problem was I needed to put the gradients and gradient rectangle in the defs at the top. Commented Nov 28, 2018 at 15:18
  • 1
    @GregorioLitenstein Please post you solution as an answer and accept it so that the question can be closed.
    – Socowi
    Commented Nov 28, 2018 at 15:42
  • 2
    I'm voting to close this question as off-topic because this is more of a coding problem and the question already has an answer over on another SE stackoverflow.com/questions/9630008/…
    – Luciano
    Commented Nov 29, 2018 at 10:05

1 Answer 1


I wanted a glow similar to what @Socowi originally posted:

Version 1 Version 2

I managed to get it working finally thanks to someone in #svg; Seems my main problem was I needed to put the gradients and gradient rectangle in the defs at the top.

Here's the working example, for reference to anybody who might have the same issue in the future:

<svg id="glowy" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">

    <defs>      <!-- We set the filter effect area to be really big to guarantee we see it all... -->
        <linearGradient id='lgrad' x1='50%' y1='100%' x2='50%' y2='0%' > 
    <stop offset='0%' style='stop-color:rgb(181,7,7);stop-opacity:1' />
    <stop offset='12%' style='stop-color:rgb(250,141,95);stop-opacity:1' />
    <stop offset='25%' style='stop-color:rgb(247,176,94);stop-opacity:1' />
    <stop offset='37%' style='stop-color:rgb(255,231,191);stop-opacity:1' />
    <stop offset='50%' style='stop-color:rgb(255,253,209);stop-opacity:1' />
    <stop offset='67%' style='stop-color:rgb(255,231,191);stop-opacity:1' />
    <stop offset='75%' style='stop-color:rgb(247,176,94);stop-opacity:1' />
    <stop offset='87%' style='stop-color:rgb(250,141,95);stop-opacity:1' />
    <stop offset='100%' style='stop-color:rgb(181,7,7);stop-opacity:1' />

    <rect width='105%' height='80%'  y='10%' x='-5%' fill='url(#lgrad)' id='gradientRect'></rect>
  <filter  id='red-orangeGlow' width='150%' height='150%' x='-25%' y='-25%'>
    <!--     Thicken out the original shape     -->
    <feMorphology  in='SourceAlpha' operator='dilate' radius='3.5' result='thickenR'></feMorphology>
 <feGaussianBlur  in='thickenR' result='blurredR' stdDeviation='10'></feGaussianBlur> 
 <feFlood result='floodR' flood-color='#ffffff'/>
 <feComposite in='floodR' in2='blurredR' operator='in' result='filledBlur'/>
 <feImage xlink:href="#gradientRect" result="gRectangle"/>
<feComposite  in='gRectangle' in2='filledBlur' operator='in' result='finalBlur'/>

         <feMergeNode  in='finalBlur'></feMergeNode>
        <feMergeNode  in='SourceGraphic'></feMergeNode>
    <!--        <feMergeNode  in='softGlow_coloredO'></feMergeNode>  -->


    <g transform="translate(20,20)">
        <rect x="0" y="0"  width="140" height="140" rx="5" ry="5" style="fill: #555555; filter:url(#red-orangeGlow)"/>
  • Images from my deleted answer/comment for future reference: version 1, version 2. Please include images and code directly into your answer so that it is self-contained.
    – Socowi
    Commented Nov 28, 2018 at 16:03
  • 1
    I'm confused. Is this the answer to your own question? If so can you expand on the explanation and keep the link? Please take a look at How to Answer.
    – Luciano
    Commented Nov 28, 2018 at 16:25
  • @Luciano I had originally posted that I found the solution as a comment and then somebody told me to answer it so the question could eventually be closed as answered. I've added all the relevant pieces now. Commented Dec 1, 2018 at 15:42
  • Does not work in Firefox (because it does not support using xlink:href with an internal object in an feImage).
    – Timwi
    Commented Dec 23, 2023 at 10:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.