Neon text can add a nice futuristic feel to any website. I’ve always loved the futuristic feel of neon.

In this article, we will use CSS and KeyFrames to achieve text glow effects, as well as various methods of neon animation.

End result:

Add a glow effect to the text

First, let the text shine. You can do this in CSS using the text-shadow property.

.neonText {
  color: #fff;
  text-shadow:
    0 0 7px #fff.0 0 10px #fff.0 0 21px #fff.0 0 42px #0fa.0 0 82px #0fa.0 0 92px #0fa.0 0 102px #0fa.0 0 151px #0fa;
}
Copy the code

text-shadowFour values are required, the first two of which represent the horizontal and vertical positions of the shadows. The third value represents the size of the blur radius, and the last value represents the color of the shadow. To increase the size of the glow effect, we will increase the third value representing the blur radius. Or, to put it another way:

text-shadow: [x-offset] [y-offset] [blur-radius] [color];
Copy the code

This is what we ended up with with CSS:

.neonText {
  color: #fff;
  text-shadow:
      0 0 7px #fff.0 0 10px #fff.0 0 21px #fff.0 0 42px #0fa.0 0 82px #0fa.0 0 92px #0fa.0 0 102px #0fa.0 0 151px #0fa;
}

/* Other styles */
  
body {
  font-size: 18px;
  font-family: "Vibur", sans-serif;
  background-color: #010a01;
}  

h1.h2 {
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}
  
h1 {
    font-size: 4.2 rem;
}
  
h2 {
    font-size: 1.8 rem;
}

.container {
  margin-top: 20vh;
}
Copy the code

Effect:

So what are all of these values? How did I get it? Why so many? First, we added a white glow effect to the outer edge of the text letter with a small blur radius.

.neonText {
  color: #fff;
  text-shadow: /* Diffuse white light */0 0 7px #fff.0 0 10px #fff.0 0 21px #fff,}Copy the code

The last five values are a wider text shadow with a larger blur radius, forming a green glow

.neonText {
  color: #fff;
  text-shadow: /* Diffuse white light */0 0 7px #fff.0 0 10px #fff.0 0 21px #fff, /* Diffuse green light */0 0 42px #0fa.0 0 82px #0fa.0 0 92px #0fa.0 0 102px #0fa.0 0 151px #0fa;
}
Copy the code

It would be nice if we could do this with less than five shadows, but we need all these shadows so that we can stack them on top of each other to increase the depth of the glow. If we switched to a single text-shadow effect, the effect would not be deep enough to make the effect look realistic.

Keep experimenting with hues and colors and blur radius sizes! Multiple cold-light effects can be created, so try different variations – even mixing and matching colors from one color to another.

“Flicker” effect

We know that some neon signs have a flashing effect, especially older signs. We can do the same thing with CSS animations! Let’s use @keyFrames to animate a seemingly random flicker to turn on and off the lighting effects.

@keyframes flicker {
  0%.18%.22%.25%.53%.57%.100% {
    text-shadow:
      0 0 4px #fff.0 0 11px #fff.0 0 19px #fff.0 0 40px #0fa.0 0 80px #0fa.0 0 90px #0fa.0 0 100px #0fa.0 0 150px #0fa;
  }
  20%.24%.55% {       
    text-shadow: none; }}Copy the code

We took the exact same text-shadow properties and values as before, wrapped them in an animation called @Keyframes flicker, and selected points in the timeline to apply the shadow, as well as points to remove the shadow completely.

All that’s left is to call the animation where the animation wants us to blink. In this case, we just add it to<h1>Element. Having part of the entire symbol flicker feels more realistic than if we applied flicker to all text.

h1 {
  animation: flicker 1.5 s infinite alternate;     
}
Copy the code

Note that if we want the whole symbol to flicker, we can technically remove the value. NeonText on the text-shadow class, animate it, and then @keyframes to apply the shadow instead.

This is a cool effect and adds more realism to our neon text! Of course, there are other effects you can try, and this article explores them further. For example, is there more pulsating animation or more subtle flickering?

Pulsating light

We see it clearly. Just like the previous example, it uses keyframes where we specify the size of the blur radius at the beginning and end of the animation.

We want the size of the blur radius to be minimal at the end of the animation, so we just need to reduce the blur radius of each text-shadow value in the keyframe by 0%. In this way, the size of the blur gradually fluctuates and flows, resulting in a pulsating effect.

@keyframes pulsate {
  100% {
    text-shadow:
      0 0 4px #fff.0 0 11px #fff.0 0 19px #fff.0 0 40px #0fa.0 0 80px #0fa.0 0 90px #0fa.0 0 100px #0fa.0 0 150px #0fa;
  }
  0% {
    text-shadow:
      0 0 2px #fff.0 0 4px #fff.0 0 6px #fff.0 0 10px #0fa.0 0 45px #0fa.0 0 55px #0fa.0 0 70px #0fa.0 0 80px #0fa; }}Copy the code

Once again, we add animation to an element. We will continue

:

h1 {
  animation: pulsate 2.5 s infinite alternate;     
}
Copy the code

Here’s where it all comes together:

Subtle flicker

All we need to do is slightly reduce the size of the blur radius in the 0% keyframe, just not to the extent seen in the previous example.

@keyframes pulsate {
  100% {
    text-shadow:
      0 0 4px #fff.0 0 11px #fff.0 0 19px #fff.0 0 40px #f09.0 0 80px #f09.0 0 90px #f09.0 0 100px #f09.0 0 150px #f09;
  }
 0% {
    text-shadow:
      0 0 4px #fff.0 0 10px #fff.0 0 18px #fff.0 0 38px #f09.0 0 73px #f09.0 0 80px #f09.0 0 94px #f09.0 0 140px #f09; }}Copy the code

Since the flicker is more subtle and the reduction in blur radius is not as large, we should increase the number of animations per second to simulate more frequent flickers. This can be done by reducing the duration of the animation, for example 0.11s:

h1 {
  animation: pulsate 0.11 s ease-in-out infinite alternate;    
}
Copy the code

Using background images

If the text is just on a dark background, it’s really boring, so we’ll use a brick texture or something:

body {
  background-image: url(wall.jpg);
}
Copy the code

Add borders

The last detail we can add is some kind of circular or rectangular border around the logo. This is just a good way to frame the text and make it look like an actual symbol. By adding a shadow to the border, we can give it the same neon effect as the text!

No matter what the container of the text is, it needs a border. Suppose we use only one

element. That’s the boundary. We call the border attribute the pure white border around the title, with a little padding to give the text some breathing room:

h1 {
  border: 0.2 rem solid #fff;
  padding: 0.4 em;
}
Copy the code

We can make it slightly rounder at the corner of the border, so border-radius applying a to the title can make things a little less edgy. You can use the value that works best for you to get the precision you need.

h1 {
  border: 0.2 rem solid #fff;
  border-radius: 2rem;
  padding: 0.4 em;
}
Copy the code

Now, text-shadow won’t work here for boundaries, but that’s okay, because that’s what the box-shadow property was designed for. The syntax is very similar, so we can even extract the desired text-shadow exactly and adjust the value slightly:

h1 {
  border: 0.2 rem solid #fff;
  border-radius: 2rem;
  padding: 0.4 em;
  box-shadow: 0 0 .2rem #fff.0 0 .2rem #fff.0 0 2rem #bc13fe.0 0 0.8 rem #bc13fe.0 0 2.8 rem #bc13fe,
              inset 0 0 1.3 rem #bc13fe;
}
Copy the code

Notice thatinsetKey words? thistext-shadowYou can’t do that, but add it to the border box-shadowThis allows us to get some glow effects on both sides of the frame to achieve some real depth.

conclusion

Hopefully this has shown you how to create cool neon text for your next project! Be sure to experiment with a variety of fonts, blur radius sizes and colors, and don’t forget to experiment with different animations – the possibilities are endless. If you have created a neat shadow effect that you want to share, please add a comment. Thanks for reading!