Just like jQuery is troubling flash, CSS3 is troubling the use of images in website designing. And this little tutorial I’m sharing with you today, will prove this.

This effect helps you to create a glow effect around text. I’ve used it as a hover effect (text glows when you bring your mouse pointer over the text). I’ve also tweaked it and now it works on all the browsers.

This is a pretty cool effect and could work great for banners as well as highlighting important links. I made the thumbnail using a black background but the demo is made using white background. You decide which looks better.

If you like this tutorial, you would also like our pure CSS3 explosion effect snippet.

Glowing Text Effect using CSS

Live Demo


<div class="text-glow"><a href="#"> Nice Mouse Over Effect
New Text Effect in CSS3 </a></div>

CSS Code

color: #000000;
font-family: Arial;
font-size: 4em;
margin: 0 auto;
text-align: center;
width: 1000px;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #000000;
-webkit-fill-color: #FFFFFF;
text-shadow: 1px 0px 20px #F90;
-webkit-transition: width 0.3s; /*Safari &amp; Chrome*/
transition: width 0.3s;
-moz-transition: width 0.3s; /* Firefox 4 */
-o-transition: width 0.3s; /* Opera */
.text-glow a{
-webkit-transition: all 0.3s ease-in; /*Safari &amp; Chrome*/
transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in; /* Firefox 4 */
-o-transition: all 0.3s ease-in; /* Opera */

Live Demo

Pin It