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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
body{ background-color:#424242; } .neon{ text-align:center; font-size:40px; margin:20px 0 20px 0; color:#ffffff; /*Glow*/ text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.neon{ text-align:center; font-size:40px; margin:20px 0 20px 0; color:#ffffff; text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; /*Animation*/ -webkit-animation: neonAnimation 1.5s ease-in-out infinite alternate; -moz-animation: neonAnimation 1.5s ease-in-out infinite alternate; animation: neonAnimation 1.5s ease-in-out infinite alternate; } |
For the key frames we need to use the vendor prefixes again, like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
/*Webkit prefix*/ @-webkit-keyframes neonAnimation { from { text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } to { text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 15px #ffffff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } } /*Moz prefix*/ @-moz-keyframes neonAnimation { from { text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } to { text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 15px #ffffff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } } /*No prefix*/ @keyframes neonAnimation { from { text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF; } to { text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 15px #ffffff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF; } } |
OHHH I like this a lot!! I am going to have to figure this out!
My son loves this kind of stuff. I’m going to show it to him later so he can give it a try!
he is very mush welcome to try.
Oh I really like that. Thanks so much for sharing this with all of us!
THANKS For stopping by
I have to admit I love neon. Clothes, details, design and website text as well. This effect is wonderful!
Simple and easy to follow steps.People with no knowledge of coding can also follow this
Nice tutorial. I run an 80s retro site that might benefit from a bit of Neon! Pretty cool effects in CSS.
Thanks for sharing all this code. I find it very interesting
Neon is the thing right now! This tutorial looks pretty simple. Ill try it.
Wow, I like this! I would love to try these codes thanks for sharing!
fee free to try and give me feedback. thank you.
This is really helpful! I love neon!
thanks a million.
This is very useful and sounds cool. Would definitely try it out.lynda
thanks Lyndia, do well to give feedback when you try it out, our support team is online 24/7 to attend to you.
I definitely want to try this sometime! Thanks so much for this tutorial
feel free to do so, do well to give feedback when you finally try.