CSS3 text glow effect with text shadow

10 March, 2012 by Tom Elliott

As a web developer, I’m starting to use CSS3 a lot more these days, especially for non-design critical elements such as rounded corners, box shadows and text shadowing.

There is no specific CSS to create a text glow, however you can create decent glow effects by applying combinations of the text-shadow property to text. The CSS 3 text shadow can be stacked to allow multiple shadows to be applied at once which is what I use here to create the text glows. The shadow closest to the text – the ones we will use to create our glows – should be applied first.

Unfortunately there is no native support for the text-shadow attribute in all current versions of Internet Explorer, but the upcoming IE 10 will support it and I expect adoption uptake to be fast partly down to the new automatic updates of IE bundled with updating windows updates. Until then, we at least need to make sure that any text with shadows is still legible without.

Anyway, onto the glows. Lets look at the basic CSS3 text shadow property:

.textShadow {
   text-shadow: 1px 4px 6px #979797;
}

The first and second values are the distance in pixels to move the shadow in the x and y respectively, the third value is the blur factor and the last is the colour. The above CSS creates the below style, with a drop shadow below the text:

HEADING WITH DROP SHADOW

Now lets add a simple text glow to our heading. This applies an inner grey shadow to the text and as the shadow isn’t offset, it is spread evenly around the text giving a glow. Our previous drop shadow still appears below the glow.

.simpleGlow {
  text-shadow: 0px 0px 2px #4d4d4d, 0px 5px 10px #aeaeae;
}

CSS3 SIMPLE GLOW & DROP SHADOW TEXT

The glow however isn’t pronounced enough for my liking, I want to create a sharp, clear glow around the text. The below example get’s closer to that – this time 4x text-shadow elements are used to create the glow, each being offset by 1 pixel at 90°, 180°, 270°, 360° in that order. The blur element is set to 0, to give it a crisp glowing outline.

.sharpGlow {
  text-shadow: 1px 0px 0px #686868 , 0px 1px 0px #686868, -1px 0px 0px #686868, 
  0px -1px 0px #686868, 1px 4px 5px #aeaeae;
}

CSS3 SHARP GLOW & DROP SHADOW TEXT

This is looking much better, but you can see on the points of the text, the glow makes the text look rounded as it doesn’t cover off all angles, those at 45°. Let’s try adding a shadow at all 45° intervals, starting at 90°:

.sharperGlow {
    text-shadow: 1px 0px 0px #686868, 1px 1px 0px #686868, 0px 1px 0px #686868, 
    -1px 1px 0px #686868, -1px 0px 0px #686868, -1px -1px 0px #686868, 
    0px -1px 0px #686868, 1px -1px 0px #686868, 1px 4px 5px #aeaeae;
}

CSS3 SHARPER GLOW & DROP SHADOW TEXT

There you have it, a nice even CSS3 glow around your text. I’ve found this technique works better with regular and bolder weighted fonts and the above is regular Arial 27px.

A few things to be wary of:
1. Be careful of using text colour that has the same background colour, Internet Explorer (until IE 10 is released) will not render text-shadows and you won’t want text to appear hidden. Alternatively, you could use a separate stylesheet to apply a different colour or style to text for IE.
2. Too many shadows may increase rendering time and slow down any movement, such as scrolling. If you use multiple shadows on text elements, use them sparingly, for example by sticking to headers rather than body copy.

---

---