Fancy Neon Text Effects with CSS3

Did you ever want to create fancy neon effects? No? Well…to bad I’ll explain how to create them anyways. Neon text mostly is achieved by using the CSS3 property “text-shadow” on multiple layers and a saturated colour, as well as some animations to look more realistic.

Live Example

The most important are 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 (i.e. The first line creates the glow with a 10px radius). In most cases we want the inner shadows to be a brighter version of the colour or even white, while the outer ones have the neon-color.

If we want, we can also animate this!

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 key frames to work

For the key frames we need to use the vendor prefixes again, like this:

Related Post

18 Comments on “Fancy Neon Text Effects with CSS3”

  1. My son loves this kind of stuff. I’m going to show it to him later so he can give it a try!

    1. thanks Lyndia, do well to give feedback when you try it out, our support team is online 24/7 to attend to you.

Leave a Reply

Your email address will not be published. Required fields are marked *