How to make glowing text in HTML and CSS

Asked 5/3, 2011 at 5:40 Answered 2/3, 2014 at 0:50

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)

Astrobiology answered 5/3, 2011 at 5:40 Comment(4)

CSS3 isn't well supported yet. – Schaffhausen 5/3, 2011 at 5:43

But, ok. It isn't well-supported ...yet. That's fine. But the glow effect obviously works on div's, I just don't understand how it won't work for text? – Astrobiology 5/3, 2011 at 5:54

IE9 dropped support for filter I believe, because it is non-standard. However, somehow it doesn't support the text-shadow property, which is very annoying – Unlookedfor 5/3, 2011 at 6:9

Very, very annoying. IE9 is nothing more than overly-exagerated-hype. Just like Apple products. :-p However, I must admit that I must have some sort of addiction to these products, as I always find myself using them anyway. – Astrobiology 5/3, 2011 at 6:14

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;

Mraz answered 5/3, 2011 at 5:44 Comment(5)

Thanks for your answer. text-shadow: #EEEE00 0 0 10px; Doesn't work in IE9 RC or IE9 Beta, there is no change in the text, and the last text-shadow sample doesn't work either. :-S – Astrobiology 5/3, 2011 at 5:57

Ahh true, msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx search for text-shadow, no support! Microsoft fail yet again. – Mraz 5/3, 2011 at 6:3

I'm so sick of hearing the generic excuse "CSS3 is still in working draft" and "HTML5 is still in working draft" - If that's the case, then why does Chrome already support feature X in HTML5 or feature Y in CSS3? Why does Flock support this, why does Opera support that? And why doesn't IE9 support most of what any other browser already support? This kind of thing is enough to turn me into a full-blown psychopath lol. – Astrobiology 5/3, 2011 at 6:7

This article may be of use: workingwith.me.uk/articles/css/cross-browser-drop-shadows – Cypro 5/3, 2011 at 17:56

@GlennG, I'm more than willing to accept that as the answer ;) It's not exactly what I was hoping, but from the looks of it, and playing around with it for a bit, I can get this to work as I want it to :-) Thanks! – Astrobiology 5/3, 2011 at 20:12

find examples here http://enjoycss.com/gallery/text_effects

enter image description here

you can open each of them in editor and adjust any css3 parameters then just get css3 code that you need (it will be generated) by enjoycss

for example http://enjoycss.com/39/1#textShadow

enter image description here

Mika answered 2/3, 2014 at 0:50 Comment(0)

Try this CSS3 Trick!

.text-glow {/*Definig font could be useful!*/
   font-size:4em;
   color: #FFFFFF;
   font-family:Arial;
   }
.text-glow:hover {
text-shadow: 1px 0px 20px #ffd200;
-webkit-transition: 1s linear 0s;
-moz-transition: 1s linear 0s;
-o-transition: 1s linear 0s;
transition: 1s linear 0s;
outline: 0 none;
   }

Inalterable answered 10/2, 2014 at 21:49 Comment(0)

If you believe you have an answer to this question, please, by all means share it. As I am not going to give up on this. I want the glow effect on Text just as much as I want my coffee every morning.

I have found a half-good, half-cr*p solution in the meantime:

<DOCTYPE html>  
<html>
<head>
<title>HTML5 &amp; CSS3 Samples</title>
<style>
  p {
  filter:progid:DXImageTransform.Microsoft.Glow(Strength, Color, Enabled);
    }
</style>
</head>
<body>
<center>
<p>Welcome!</p>
</center>

</body>
</html>

Astrobiology answered 5/3, 2011 at 6:26 Comment(3)

Um. I don't remember typing a whole paragraph twice. – Astrobiology 5/3, 2011 at 6:28

Hahahah perhaps time to see a doctor? – Mraz 5/3, 2011 at 6:30

Possibly. However, I must get my text to glow before I commit myself (or somebody else commits me) haha :P - But in all seriousness, Glowing Text; You'd think that with all the uber awesome things that can be achieved right now in Web Design, even pre-HTML5/CSS3, you would've thought, maybe even expected that you'd be able to glow some text lol. – Astrobiology 5/3, 2011 at 7:2

Recommended topics

Hot tags