Cross-Browser Text Glow Demo

27th October 2005 · Last updated: 5th October 2016
 

Comments


Why wait for text-shadow in CSS3 to give us a glow effect? Currently only Safari and Konqueror can handle text-shadow, leaving all other browsers in the cold. Well now we can mimic a glow effect using nothing more than divs and basic CSS. This demo works on all the major Windows browsers:

Cross-Browser Text Glow Demo

Admittedly it's not the same quality as genuine text-shadow, but might prove useful for headers, or certain text you wish to highlight. It also generates a neat outline effect if you set the text to the same colour as the background.

Obvious Drawbacks

  1. Lots of divs.
  2. Lots of precise positioning.
  3. Messy markup (to say the least). Should have purists aghast with horror.*
  4. Only works if the fade colours blend in with the background well. (Try it on a dark background — yuck!)
  5. I guess background images and overlapping other elements will ruin the effect.
  6. Ruins semantics. How do you use an <h1> element if you need to repeat it for the effect? Maybe it would work with matching divs as well?
  7. Looks different if you have ClearType (LCD font smoothing) turned on. Works nicely though, as Windows XP smooths the black text into the yellow on curves. (I noticed this happened even with ClearType off on the bold text.)
  8. May look slightly different on various monitors. I found it tricky to get the colours right to be honest. If they look wrong to you, trust me, it's fine on my LCD screen. (I have yet to see it on a CRT though. It may well look too dark there.)

*Maybe JavaScript could be used to replicate a single div and avoid extra markup?

Browser Support

Tested on Windows XP SP2.

  • Opera 8.50 - perfect
  • Firefox 1.07 - perfect. (Try increasing the text size!)
  • Internet Explorer 6 - perfect

Comments (2)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. sambath:
    demo for editor in asp coding

    Posted on 1 December 2005 at 4:50 am
  2. dan:
    Well I am just thinking that with all of those cons, and you really want the effect, it would be better to go with a graphic.

    Thank you for putting it here of course. Even knowing the header tag would have much seo weight sometimes designers have to make choices. And as long as you are GOOD at your SEO then you can balance things out.

    The main reason I am saying this is that if we are going to try and get a glow, i just don't think it works going half way.

    Posted on 6 December 2005 at 12:22 pm