How do I animate a glowing effect on text?

Question

I haven't really been able to find any good simple tutorials an animating a glow effect. How do I animate glowing on text?

Baksheesh

We need more than "animating a glow effect". What do you want this animation to look like? Changing color? Changing glow radius? – Doucet

anything, once I'm started, I can tweak it from there. Cause it's just css properties. – Baksheesh

well, i do suppose I should have specified that I DO mean CSS3 properties, more specifically text/box-shadow. I just assumed when people think of glow, they think of something having an aura... like radiating part of it's energy. oops. – Baksheesh

Answer 1

If you want to just use CSS3, you don't even have to use any jQuery/JavaScript. Just do this in your CSS:

.confirm_selection {
    -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;
}
.confirm_selection:hover {
    text-shadow: 0 0 10px red; /* replace with whatever color you want */
}

Here's the fiddle: http://jsfiddle.net/zenjJ/

If you want the element to run on its own (without hovering), do this:

CSS:

.confirm_selection {
    -webkit-transition: text-shadow 1s linear;
    -moz-transition: text-shadow 1s linear;
    -ms-transition: text-shadow 1s linear;
    -o-transition: text-shadow 1s linear;
    transition: text-shadow 1s linear;
}
.confirm_selection:hover,
.confirm_selection.glow {
    text-shadow: 0 0 10px red;
}

JavaScript:

var glow = $('.confirm_selection');
setInterval(function(){
    glow.toggleClass('glow');
}, 1000);

You can play around with the timing in the CSS/JavaScript to get the exact effect you're looking for.

And finally, here's the fiddle: http://jsfiddle.net/dH6LS/

---

Update Oct. 2013: being that all major browsers now support CSS animations, all you need is this:

.confirm_selection {
    animation: glow .5s infinite alternate;
}

@keyframes glow {
    to {
        text-shadow: 0 0 10px red;
    }
}

.confirm_selection {
    font-family: sans-serif;
    font-size: 36px;
    font-weight: bold;
}

<span class="confirm_selection">
[ Confirm Selection ]
</span>

Here's the fiddle: http://jsfiddle.net/dH6LS/689/

Don't forget to include all the different vendor prefixes in production.

Fenugreek

despite the October '13 Update probably being the preferred method for modern browsers, cross-browser methods rule. setInterval loops for the win! – Deathtrap

Great update. Works great for my 'pulse' text effect. I used ease-in-out and a slight delay, but based off of this. – Alcatraz

And even if you did use transition, you don't have to vendor-prefix it: shouldiprefix.com/#transitions – Disdainful

Answer 2

You can use .animate to cycle to a chosen colour to create a "highlight" effect which is presumably what "glowing" means.

$(".confirm_selection").hover(function() {
    $(this).animate({
        color: "red"
    }, 2000);
}, function() {
    $(this).animate({
        color: "black"
    }, 2000);
});

You can try it here.

NOTE: Colour animation requires the use of either the colour animation plugin, or jQuery UI (which I assume you are already using as it has been included in your fiddle).

Dodi

Don't forget that jQuery does not natively support color animation. You'll have to either use jQuery UI, or the color animation plugin. – Fenugreek

You can actually animate using CSS3 transitions. – Doucet

what about the css3 properties? can I animate text-shadow? – Baksheesh

Definition of glowing: thefreedictionary.com/glowing emitting light. I thought this was well known. =D – Baksheesh

@TheLindyHop - My understanding of "a glowing element" happens to be one which brightens, then dims. :D – Dodi

Answer 3

You can do this with pure CSS3 transitions:

div.transition{
    text-decoration: none;  
    color: blue;  
    text-shadow: none;  
    -webkit-transition: 500ms linear 0s;  
    -moz-transition: 500ms linear 0s;  
    -o-transition: 500ms linear 0s;  
    transition: 500ms linear 0s;  
    outline: 0 none; 
    background-color:#000; 
    font-size:2em;
    width:300px;     
    height:100px; 
    padding:1em;
}

div.transition:hover {
    color: #fff;  
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; 
}

Example: http://jsfiddle.net/jasongennaro/z5jCB/1/

Note: Glowing text works best on a dark background.

Inspiration (and much of the code) from here: http://www.sitepoint.com/css3-glowing-link-effect/

Sixfooter

that is sexy. Is there a way to make it pulse? like... do the animation without the :hover? – Baksheesh

Answer 4

Try this code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function ()
{
    var glow = $('h1');
    setInterval(function()
    {
        glow.toggleClass('glow');
    }, 1000);
});
</script>
<style type="text/css">
    h1 {
        -webkit-transition: text-shadow 1s linear;
        -moz-transition: text-shadow 1s linear;
        -ms-transition: text-shadow 1s linear;
        -o-transition: text-shadow 1s linear;
        transition: text-shadow 1s linear;
        width: 725px;
    }
    h1:hover,
    h1.glow
    {
        text-shadow: 0 0 10px Green;
    }
</style>
</head>

<body>
    <h1>This text has Glow Animation Effect</h1>
    <div class="buttons">
        <input type="text" name="txt"> <input type="button" class="btnAdd" value="Add"><br>
    </div>
    <h3>J Query</h3>
</body>

</html>

Eugenioeugenius

Answer 5

Here's an animated pure CSS example:

@keyframes shadow {
  0% {
    text-shadow: 5px 5px 10px gray;
  }
  25% {
    text-shadow: -5px 5px 10px gray;
  }
  50% {
    text-shadow: -5px -5px 10px gray;
  }
  75% {
    text-shadow: 5px -5px 10px gray;
  }
}

h1 {
  text-shadow: 5px 5px 10px gray;
  animation: shadow 2s infinite ease;
}

https://codepen.io/juanbrujo/pen/abyoXNY

Heraclitean

Not my cup of tea but worth a vote for including a .gif which saves people time from putting the code in themselves to see the effect. – Kittle

Answer 6

I found this on-line and it only took a couple of minutes to setup:

// Neon glowing Text: https://www.w3schools.com/howto/howto_css_glowing_text.asp
.glow {
  // font-size: 80px; // Way TOO BIG
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

I don't like the colors and will change them to a fire color (if I can figure out the codes):

Kittle

Answer 7

Here is an animation effect that I have found useful in the past by adding a new step function to the jQuery fx object.

$.fx.step.myBlurRedEffect = function (fx) {
    $(fx.elem).css({
        textShadow: '0 0 ' + Math.floor(fx.now) + 'px #FF0000'
    });
}

Which is called in the usual way (say blur 6px in half a second):

$('#myID').animate({
    myBlurRedEffect: 6
},{
    duration: 500
});

http://jsfiddle.net/whLMZ/1/

This should get you started, and you should find many fun ways to extend upon this, add other CSS parameters etc... :)

Hamlett

@TheLindyHop I added a working version. You set the CSS attribute to an invalid value "text-shadow:4 4 [x]px #FFFFFF" (4 what?). – Hamlett

@TheLindyHop Just putting it out there again http://jsfiddle.net/whLMZ/1/ – Hamlett

Answer 8

No one mention css3 keyframes which can animate the glow effect getting rid of javascript(this coming from a javascript dev).

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
        :root { --color: blue; }
        span.vjs { --color: #F3E5AB; }
        span.cv { --color: skyblue; }
        body {background:gray;}
        .vjs, .cv, h1 {
          text-align: center;
          font-size: 30pt;
          font-weight: 100;
          font-family: cursive2;
        }
        .vjs {
          text-shadow: 0 0 2px #333333, 0 0 4px #333333;
          color: var(--color);
        }
        .cv {
          text-shadow: 0 0 2px #fff, 0 0 4px #fff;
          color: #2965f1;
        }
        h1 {
          text-shadow: 0 0 2px #fff, 0 0 4px #fff;
          color:black;
        }
        .cv:hover, .vjs:hover, h1:hover {
            animation: glow 1s linear infinite;
            color: var(--color);
        }
        @keyframes glow {
            0% {text-shadow: 0 0 0px var(--color);}
            50% {text-shadow: 0 0 10px var(--color);}
            100% {text-shadow: 0 0 0px var(--color);}
        }
    </style>
    <script src="vanilla-js.com/lib/vanilla.4.1.min.js"></script>
    </head>

    <body>
    <h1>This text has Real Glow Animation Effect with 
<span class="vjs">Vanilla JS</span>And <span class="cv">CSS Variables</span>. Hover over all the texts!</h1>
    </body>

    </html>

A jsfiddle

Hiphuggers