Neon Effect on Text – CSS

One of the big advantages of CSS3 is that it allows us to create stunning text effects through some of its properties. Although text-shadow property has been present for some time, it can be enhanced by using the animation property.

The following example will create text with a neon effect and the addition of a glowing effect on hover.

As you might know the syntax for text-shadow is: offset-x offset-y radius color, where offset-x is the horizontal offset of the shadow from text, offset-y its vertical offset, radius is the distance by which the blur of the shadow is calculated and color is the CSS color of the shadow. The result will change the shadow on hover, add animation, thereby creating a more realistic effect. It is given the following markup:

We can write the following CSS:

 

Demo: