Neon Text Effects with CSS3
I always explore for fancy ways to display typography. Recently came across a website which displayed text as a neon effect. So, here I am having a tutorial how to have neon light text effect using CSS3 text-shadows and animations.
Neon text mostly is achieved by using the CSS3 property “text-shadow” on multiple layers and a saturated color, as well as some animations to look more realistic.
The most important part here is the “text-shadow” — We won’t use it for an actual shadow but for the glow effect of the text. Each line in the value represents one of the radiuses of the glow. Basically, the first line creates a glow with a 10px(pixel) radius. In most cases we want the inner shadows to be a brighter version of the color or even white while the outer ones have the neon-color.
Now for the animation effect, we want to use an “animation” attribute here for the glow effect, don’t forget the vendor prefixes “-webkit-” and “-moz-”. Right now the animation still needs its keyframes to work. Check neon.css lines L5-L23
For the Keyframes, we need to use the vendor prefixes again. Check neon.css lines L25-L96. Finally just add the neon-effect class name to the element of your choice.
