How to make glowing text in HTML and CSS

anon271334 picture anon271334 · Mar 5, 2011 · Viewed 57.8k times · Source

I want to make glowing text in HTML and CSS. I'm following this tutorial.

http://msdn.microsoft.com/en-us/library/gg589484(v=VS.85).aspx#creating_%22glow%22_effects_with_drop_shadows

I want the text to glow, just like the minimize, maximize and exit buttons on Windows Vista and 7 glow when you hover over them.

I have read 8 tutorials online, all saying that FILTER ONLY works on IE (Complete BS btw, I am using IE9 RC and it doesn't even display), so none of the tutorials I have found about glowing actually work for text like <p>, <a> <h1> etc.

How can I make my text glow on hover? (without images)

Answer

Marko picture Marko · Mar 5, 2011

Have a play with CSS3 text-shadow perhaps.

text-shadow: #EEEE00 0 0 10px;

IE8 and below won't support it, but that's where filter comes in handy.

filter: glow(color=#EEEE00,strength=3);

P.S. A neat little feature of the CSS3 text-shadow property is that it allows multiple shadows.

text-shadow: #EEEE00 0 0 10px, #FF0000 5px 5px 5px;