Hello, in this tutorial, I will show you how to add the NEON effects to texts for your website.
Neon Text Style
Building a NEON Styled Text with CSS
Setting up the HTML Page
Begin by adding an <h1> element inside the HTML page and apply the neon-text style to it.
Then create a CSS file and add it to the HTML page.
<link rel="stylesheet" href="./index.css">
Building the CSS
In the CSS file, create a variable for the glow and enhanced glow color.
For the enhance glow, use a lighter color than the glow color.
Now that we have our variables, let’s center the text so we can see it better.
Add the selector for the body element. Set the width and height to match the dimensions of the window, background color to with black, and then center the text using display: flex, justify-content:center, and align-items:center.
Decorating the Text
For the next step, create the selector for the neon-text class.
Set the color of the text to white.
.neon-text {
color: white;
}
To make it glow and shine like a neon light we’ll need to use the text-shadow property and apply a few shadows to it.
Each shadow will take 4 values.
For the first 2, we need to provide an x and y position of where the shadow will start.
The next value is for the blur. The higher the value, the blurrier the shadow becomes. For now, use a small number like .3em so it’ll scale with the text.
The last value is the color of the shadow. Use the var() function and pass in the glow-color variable.
.neon-text {
color: white;
text-shadow:
0 0 .3em var(--glow-color);
}
If we look at the results, there is a small blurry shadow around the text and it makes it seem like there is a very dimmed glow emitting from the text.
Now we just need to intensify the glow.
To intensify the glow, we need to stack more text shadows on top of each other. Add another text shadow to the existing text-shadow property using a comma, and providing the 4 values again.
.neon-text {
color: white;
text-shadow:
0 0 .3em var(--glow-color),
0 0 .7em var(--glow-color);
}
This time, the blurriness of the second text shadow should be larger than the first one because we want to slowly expand the shadow to create the effect of a stronger glow.
If we look at the result again, the glow is brighter.
As you can see, as we stack more text-shadows on top of each other, the glow becomes more prominent.
Add a third text-shadow to complete the effect. This time, use 1.5em for the blur.
To intensify the effect when we hover over on it, define another selector for the neon-text class and apply the hover pseudo class.
Apply the same text-shadow values as the original. Change the value in all the var() function to enhanced-glow-color. Then add another text shadow with the larger blur.
Now when we hover over on the text, it the glow will intensify.
Complete CSS
