CSS Neon Effect on Text

You can create a neon effect on text by using the text-shadow and animation functions in CSS. Here I will show you how. Pay close attention so you can get the neon effect you want.

What is the neon effect?

A neon effect is an effect that is applied to an HTML element so that it looks like it is lit or flashing light in a certain color; usually, the preferred color for neon effects is bright blue.

Neon effects can be applied to HTML elements such as boxes or text. This time, I focused on the text element only. For your information, applying neon effects to text and boxes (div) uses different CSS functions. We also have another CSS trick to align images side-by-side in blogger.

How to create a neon effect on text

All you need to do to give your text a neon effect is to create a text HTML element such as a heading or paragraph and then use the text-shadow and animation functions on that element.

Creating HTML text elements

Create an HTML text element as follows:

<div class = "bg-dark'>
    <h2 class="neon-effect">This is a text with a neon effect</h2>
</div>


I've created a div which I've given the class bg-dark to. That is, the background color of this div must be dark because the neon effect only looks perfect against a dark background. Then, a text element, in this case I use <h2> to make it large. You can also set the font size by using the CSS font-size function in the <h2> tag that we give the neon-effect class to. In addition, you can also adjust the position of the text so that it appears in the middle of the box by using the CSS text-align function or display on the div. Don't worry, I've prepared it.

Add CSS function

After creating the text element as above, then you must add the following CSS function so that you can get the expected neon effect. The CSS code that you write can be placed above the HTML code enclosed in the <style>code here</style> tag.

Set the background color, size, and position of the text in the div box

.bg-dark{
    top:0;
    left:0; width:100%;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background: rgb(43, 49, 61);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

The CSS code above sets the box width to 100% and the box height to 100 vertical height. Then, we also set the background color of the box to dark blue while the text color inside is white. The typeface applied is Arial and the text has been positioned right in the center both vertically and horizontally.

Create a neon effect

The perfect neon effect on text is to make the light move, not static. Therefore, we need to use the animation function; the text-shadow function is inside keyframes animation. Here is the CSS code.

.neon-effect{
    animation: neon 2s linear infinity;
}

The CSS code above provides an animation that we name neon that will run for two seconds (2s, you can customize it). In addition, each effect will work in the same duration (linear) and will not stop as long as the text is still displayed (infinity).

After that, we have to create the content of the neon animation using the keyframes function as shown below:

@keyframes neon {
0%{
text-shadow: 0 0 5px #03bcf4,
0 0 10px #03bcf4,
0 0 20px #03bcf4,
0 0 40px #03bcf4,
0 0 80px #03bcf4,
0 0 100px #03bcf4;
}
50%{
text-shadow: 0 0 10px #03bcf4,
0 0 20px #03bcf4,
0 0 40px #03bcf4,
0 0 80px #03bcf4,
0 0 160px #03bcf4,
0 0 400px #03bcf4;
}
100%{
text-shadow: 0 0 5px #03bcf4,
0 0 10px #03bcf4,
0 0 20px #03bcf4,
0 0 40px #03bcf4,
0 0 80px #03bcf4,
0 0 100px #03bcf4;
}

In this example, I'm using a bright blue (#03bcf4) for the neon effect. Of course, you can use other colors. However, what you need to note is that if you change the color, you will have to change the entire color code that is in the keyframe above.

Now, you can see the neon effect text that you have created. It turns out, creating a neon effect on text with CSS is very easy, right?