Neon Text Display Using HTML & CSS

Last Updated : 04 Aug, 2023

In this article, you will learn to create a neon text display using HTML & CSS. The neon text display is the simplest yet one of the most striking effects used to give cool design to your texts on your web pages. In the neon display, the color of the text glows continuously which you can control by animation time. The text gets a glowing effect using the text-shadow property with some color combinations.

Approach: First of all, we will add the text which we want to display in neon style in a span class. Then in this class, we set the font color according to our desire. Then we have to use the animation property and give it a name. In the animation, we set the animation-timing to ease-in-out for a slow start and slow end of the animation, the animation iteration to infinite for continuous display, and finally the animation direction to alternate so that the animation goes forwards first, then backward. Then we use the @keyframes to specify the animation code. In the @keyframes we use the text-shadow property, and apply various color combinations to create the neon light effect.

Example 1:

HTML

<!DOCTYPE HTML>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Neon text Display Using HTML and CSS</title>
    <style>
        body {
            margin: 10px;
            font-family: sans-sarif;
            height: 100%;
        }
         
        /* values of properties of animation assigned */
        .neon-header {
            text-align: center;
            line-height: 2;
            color: green;
            animation: neon 1s ease-in-out infinite alternate;
            margin-left: 200px;
        }
         
        /* various colour combinations used to create
        neon effect */
        @keyframes neon {
            from {
                text-shadow: 0 0 35px #85FF64,
                            0 0 40px #2BBF03,
                            0 0 55px #141ae2;
            }
    </style>
</head>
 
<body>
    <center>
        <!-- text we want to display -->
        <span class="neon-header">
            <h1>GeeksforGeeks</h1>
        </span>
        <p>A Computer Science Portal for Geeks</p>
    </center>
</body>
 
</html>

Output: Note: You can out the displayed text in any tag not necessary to contain the text in the <span> tag.

Example 2: In this example, you will see that the text is glowing from shade to other shades this one is more eye attractive.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>Neon text Display Using HTML and CSS</title>
    <style>
        body {
            background-color: black;
        }
         
        .glow {
            font-size: 60px;
            color: green;
            text-align: center;
            animation: glow 2s ease-in-out infinite alternate;
        }
         
        /* Text glowing from one shade to other shade */
        @-webkit-keyframes glow {
            from {
                text-shadow: 0 0 10px rgb(43, 255, 0),
                            0 0 20px rgb(43, 255, 0),
                            0 0 30px #26e600,
                            0 0 40px #26e600,
                            0 0 50px #26e600,
                            0 0 60px #26e600,
                            0 0 70px #26e600;
            }
            to {
                text-shadow: 0 0 20px #4dff7a;
                            0 0 30px #4dff7a,
                            0 0 40px #4dff7a,
                            0 0 50px #4dff7a,
                            0 0 60px #4dff7a,
                            0 0 70px #4dff7a,
                            0 0 80px #4dff7a;
            }
        }
    </style>
</head>
 
<body>
 
    <!-- Content will Glow -->
    <h1 class="glow">GeeksforGeeks</h1>
 
</body>
 
</html>