CSS Glowing Effect

[Nathan]

I was looking into how to give some text a glowing effect earlier this morning so figured I would share.

 

<span style="color:red; text-shadow: 0 0 10px #c61a1a;"><b>TEXT GOES HERE</b></span>

 

The above code will generate:

 

This post has been promoted to an article

[ukfan41]

Nice find!

[Talk Tech News]

Nice. I have really been getting into CSS this year and would like to learn a lot more about it. I would like to do a course on it, perhaps people have some suggestions?

[kam112]

Are there any sections on this forum that specifically deal with CSS and other things similar to what you have posted?

[Nathan]

Well for now this board is the place for all CSS related code. If it starts receiving enough new threads on only that I would consider creating it's own sub board. Why what's up?

[kam112]

I was just wondering more about CSS and how it works and so on.

[Nathan]

Ah then post you questions here: https://forums.prodjex.com/forum/8-website-development-design/

[ItsBrad]

Nice, I see the staff have the glow effect

[DevilKid]

Well done . There is the website called www.css3generator.com which makes all these effects for you. It is a great website. I have been using all the CSS3 effects from it.

[Nathan]

Nice, I see the staff have the glow effect

Yup, that's the entire reason I found this tutorial

[TehPhantom]

I use this on some of my designs, it is pretty useful when highlighting text. Nice find!

[Fallace]

That's pretty cool, I wasn't even aware this could be done! Thanks for sharing!

[JackClarke]

You can do some pretty amazing things with it. Just for those who are interested it goes like this.

 

text-shadow: {1} {2} {3} {4};

 

{1} = Horizontal offset. If this is 1px then the shadow goes up by 1px, -1px sends it down by 1px.

{2} = Vertical offset. If this is set to 1px then the shadow goes right by 1px, -1px sends it left by 1px.

{3} = [OPTIONAL] Blur radius. This is how much blur you want to use. More blur results in a bigger glow.

{4} = Colour. This can be set using any HTML colour value whether it is 'red' or #FF0000.

 

Hopefully this will help anyone wanting to use this.

[OhioTom76]

If you happen to have Photoshop, there are a couple of plugins called CSSHat, and CSS3P - the later is free. They can take Photoshop layer styles and convert them into CSS code for you. Granted not all layer styles can translate into CSS, but it will warn you what will and won't translate. I use these all the time to create complex gradients. Its so much more intuitive than trying to come up with the markup yourself.