How to create the Neon Text Effect using Pure CSS?

Online tools like Canva provide us with exciting graphics and features like the Neon Text Effect. You mostly wish to add such an image or characteristics to your websites or to create a colorful portfolio. Let’s learn how to add this effect to a simple text field using pure CSS and bring out the best user interface for your next web or mobile application!

The Neon Text Effect

Neon text can add a creative, and futuristic feel to your web app. The magic-looking characters, and the glowing effect with this effect, will always attract any visitor to your website. Let’s look at the simple steps that can help you achieve the same by just using pure CSS!

Step 1: Base Colors and Font

Firstly, we should decide on a nice-looking font and a suitable font and background colour that would make the neon effect look even better. Let’s use the ‘neon’ font and the colour white for the font, and black for the background, for this example.

.neon_text {
 font-family: neon;
 background-color: #000;
 color: #fff;
}

Step 2: Neon shade and Font size

Next, we will add the font-size and the text-shadow property. This does the main magic. The text-shadow size is specified as per the font-size. Larger fonts require higher shadow values.

.neon_text {
 font-family: neon;
 background-color: #000;
 color: #fff;
 font-size: 16px;
 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;
}

The text-shadow takes. in the following values:

text-shadow: [x-offset] [y-offset] [blur-radius] [colour];

The multiple values define the neon effect. You may notice that the initial set of values has a lower blur radius, with a white. colour. This is for the base colour (i.e. white) glow at the external edges of the text letters. Then we slowly change the colour shade and alter the blur radius to make it spread around. You can similarly customize your neon effect specifying any size of blur radius and any color of your choice.

Step 3: Add animation

Finally, you can add flickering or any other animation to your neon letters to make them sparkle even more!

Look at the keyframe below that alters the text shadow and makes the neon letters animate!

@keyframes neon-animation {
  0% {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }
  100% {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #00ff86, 0 0 70px #00ff86, 0 0 80px #00ff86, 0 0 100px #00ff86, 0 0 150px #00ff86;
  }
}

You can add this animation to your neon text and check final results for amazing neon sparkling letters!

.neon_text {
 font-family: neon;
 background-color: #000;
 color: #fff;
 font-size: 16px;
 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;
 animation: neon-animation 1s ease-in-out infinite alternate; 
}