Glowing text effect using CSS3

We have seen websites containing texts which glows on hovering over it.

In this post,we will take a quick look on how this effect is achieved.

For this technique to see in action, you need a modern browser which supports CSS3.

We will be using CSS3 shadows for this effect.

• Create an html file and name it as glow.html
• Create an anchor with class name glow-text inside a div with id container .

<div id="container">
<a href="#" class="glow-text">I'm glowing</a>
</div>

Now its time to add some styles.

<style>
#container {
 width:300px;
 height:100px;
 background:blue;
 margin:auto;
}
a.glow-text {
 font-size: 3em;
 line-height: 1.4em;
 color: white;
 font-style: italic;
 font-family: Georgia, times, serif;
 color: #fff;
 text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
 text-decoration: none;
  padding: 10px 15px;
 cursor:pointer;
}
a.glow-text:hover {
 text-shadow: 0px 0px 10px #fff;
}
</style>

 What is text-shadow

A CSS2 property (dropped in 2.1 then reintroduced in CSS3)
that adds a shadow to hypertext, with options for the direction,
amount of blur, and color of the shadow.

 text-shadow: 0px 0px 10px #fff;

What is RGBA

Not a CSS property, but rather a new color model introduced
in CSS3, adding the ability to specify a level of opacity along
with an RGB color value.

rgba(0, 0, 0, 0.5) /* black at 50% opacity */

Enjoy using glowing text-effect in your website.

Download glow.html