Home Web Design CSS CSS Neon Text Effect With Animation | Glowing Text In HTML CSS

CSS Neon Text Effect With Animation | Glowing Text In HTML CSS

May 20, 2019

17853

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.

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.

<!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>

<!DOCTYPE html>

<head>

<title>CSS Neon Text Effect | Webdevtrick.com</title>

</head>

<body>

<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.

/** 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;
  }
}

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.

6 COMMENTS

MiB May 20, 2019 At 5:39 pm

Muheh, that`s lovely (for a certain purpose). ;o)

Reply
- shaan May 20, 2019 At 5:39 pm
  
  Thank you very much buddy!
  
  Reply
Irina Ivanova May 20, 2019 At 7:28 pm

Thank you very much! it’s cool!!!

Reply
- shaan May 21, 2019 At 3:40 am
  
  Thanks for your comment, stay connected.
  
  Reply
Saket May 28, 2019 At 4:03 am

Hi Shaan, great work you post regularly. But CSS neon text isn’t working. Please check

Reply
- shaan May 28, 2019 At 6:04 am
  
  This is only working in google chrome latest version, If you using another browser then you have to put extra tags like -webkit- etc.
  
  Reply

CSS Neon Text Effect With Animation | Glowing Text In HTML CSS

Preview Of Glowing Text

CSS Neon Text Effect Source Code

6 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY