How to create a glowing neon text effect using HTML & CSS? Solution: CSS Neon Text Effect With Animation program.

I am sure that you know what is the neon effect. Maybe you have seen before, a glowing text in the dark background that creates the neon effect. Mostly these type of effects uses in graphic design. But If you add this type of text effect, then your website will more attractive. Now question is that, how can we create this in coding? on webpage.

Yes, you can create this program after visiting this post. So, today I am sharing CSS Neon Text Effect With Animation. In other words, glowing text in HTML CSS. The whole concept is based on the right colors. With CSS if you have good color knowledge then you can create this easily. Maybe you can create better.

This program is in pure CSS, I think we can do better with jQuery. With only HTML & CSS we can create light-weight and fast loading program. & this is a good example of showing the power of CSS3. In my opinion, you can add this text effect in your header section. Give this effect on which text you want to highlight.

If now you are thinking how this program actually looking, the see the preview given below.

Preview Of Glowing Text

See this video preview to getting an idea of how this program actually is.

Now you can see this effect visually how this looks like. If you like this, then get the source code of its.

You May Also Like:

CSS Neon Text Effect Source Code

Before sharing source code, Let’s talk little bit about this program. As you know this is a pure CSS program. For creating this CSS Neon Text Effect is used the color combination in CSS text-shadow (get info) property. I used a different color for a different dimension. Used an external font by putting source link. And I also used @keyframe for creating glow off & on effect.

For creating this program you have to create only 2 files. One for HTML and one for CSS. Follow the steps for creating the program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

index.html <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS Neon Text Effect | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <span class="webdev">Webdevtrick</span> <span class="socod">Get Source Code</span> </div> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html lang = "en" > <head> <meta charset = "UTF-8" > <title> CSS Neon Text Effect | Webdevtrick.com </title> <link rel = "stylesheet" href = "style.css" > </head> <body> <div class = "main" > <span class = "webdev" > Webdevtrick </span> <span class = "socod" > Get Source Code </span> </div> </body> </html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

style.css /** code by webdevtrick ( https://webdevtrick.com ) **/ @font-face { font-family: 'neontubes'; src: url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.eot"); src: url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.eot?#iefix") format("embedded-opentype"), url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.woff2") format("woff2"), url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.woff") format("woff"), url("https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.ttf") format("truetype"); font-weight: normal; font-style: normal; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #030c1c; } .main { display: block; position: absolute; top: 50%; left: 30%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50vw; height: auto; font-family: "neontubes"; font-size: 16vw; text-align: center; white-space: nowrap; } .main span { display: block; position: relative; -webkit-transform: translateZ(0) translate3D(0, 0, 0); transform: translateZ(0) translate3D(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: opacity; } .main .webdev { color: #ffd9e2; text-shadow: 0 0 0 transparent, 0 0 10px #ff003c, 0 0 20px rgba(255, 0, 60, 0.5), 0 0 40px #ff003c, 0 0 100px #ff003c, 0 0 200px #ff003c, 0 0 300px #ff003c, 0 0 500px #ff003c, 0 0 1000px #ff003c; -webkit-animation: blink 4s infinite alternate; animation: blink 4s infinite alternate; } .main .socod { font-size: 11vw; color: #d4eaff; text-shadow: 0 0 0 transparent, 0 0 10px #2695ff, 0 0 20px rgba(38, 149, 255, 0.5), 0 0 40px #2695ff, 0 0 100px #2695ff, 0 0 200px #2695ff, 0 0 300px #2695ff, 0 0 500px #2695ff; -webkit-animation: buzz 0.01s infinite alternate; animation: buzz 0.01s infinite alternate; } @-webkit-keyframes buzz { 70% { opacity: 0.80; } } @keyframes buzz { 70% { opacity: 0.80; } } @-webkit-keyframes blink { 40% { opacity: 1; } 42% { opacity: 0.8; } 43% { opacity: 1; } 45% { opacity: 0.2; } 46% { opacity: 1; } } @keyframes blink { 40% { opacity: 1; } 42% { opacity: 0.8; } 43% { opacity: 1; } 45% { opacity: 0.2; } 46% { opacity: 1; } } @media screen and (min-width: 1000px) { .main { width: 400px; font-size: 150px; } .main .socod { font-size: 103px; } } 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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 /** code by webdevtrick ( https://webdevtrick.com ) **/ @font-face { font-family : 'neontubes' ; src : url ( "https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.eot" ) ; src : url ( "https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.woff2" ) format ( "woff2" ) , url ( "https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.woff" ) format ( "woff" ) , url ( "https://bitbucket.org/kennethjensen/webfonts/raw/fc13c1cb430a0e9462da56fe3f421ff7af72db71/neontubes/neontubes-webfont.ttf" ) format ( "truetype" ) ; font-weight : normal ; font-style : normal ; } body { -webkit-font-smoothing : antialiased ; -moz-osx-font-smoothing : grayscale ; background : #030c1c ; } .main { display : block ; position : absolute ; top : 50% ; left : 30% ; -webkit-transform : translate ( -50%, -50% ) ; transform : translate ( -50%, -50% ) ; width : 50vw ; height : auto ; font-family : "neontubes" ; font-size : 16vw ; text-align : center ; white-space : nowrap ; } .main span { display : block ; position : relative ; -webkit-transform : translateZ ( 0 ) translate3D ( 0, 0, 0 ) ; transform : translateZ ( 0 ) translate3D ( 0, 0, 0 ) ; -webkit-backface-visibility : hidden ; backface-visibility : hidden ; will-change : opacity ; } .main .webdev { color : #ffd9e2 ; text-shadow : 0 0 0 transparent, 0 0 10px #ff003c, 0 0 20px rgba ( 255, 0, 60, 0.5 ) , 0 0 40px #ff003c, 0 0 100px #ff003c, 0 0 200px #ff003c, 0 0 300px #ff003c, 0 0 500px #ff003c, 0 0 1000px #ff003c ; -webkit-animation : blink 4s infinite alternate ; animation : blink 4s infinite alternate ; } .main .socod { font-size : 11vw ; color : #d4eaff ; text-shadow : 0 0 0 transparent, 0 0 10px #2695ff, 0 0 20px rgba ( 38, 149, 255, 0.5 ) , 0 0 40px #2695ff, 0 0 100px #2695ff, 0 0 200px #2695ff, 0 0 300px #2695ff, 0 0 500px #2695ff ; -webkit-animation : buzz 0.01s infinite alternate ; animation : buzz 0.01s infinite alternate ; } @-webkit-keyframes buzz { 70% { opacity : 0.80 ; } } @keyframes buzz { 70% { opacity : 0.80 ; } } @-webkit-keyframes blink { 40% { opacity : 1 ; } 42% { opacity : 0.8 ; } 43% { opacity : 1 ; } 45% { opacity : 0.2 ; } 46% { opacity : 1 ; } } @keyframes blink { 40% { opacity : 1 ; } 42% { opacity : 0.8 ; } 43% { opacity : 1 ; } 45% { opacity : 0.2 ; } 46% { opacity : 1 ; } } @media screen and (min-width: 1000px) { .main { width : 400px ; font-size : 150px ; } .main .socod { font-size : 103px ; } }

That’s It. Now you have successfully created CSS Neon Text Effect or glowing text effect program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.