Neon Text Display Using HTML & CSS

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 designing to your texts on your web pages. In the neon display, the color of the text glows continuously that you can control by animation time. The text gets 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
        <p1>A Computer Science Portal for Geeks</p1>
    </center>
</body>
  
</html>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 onw 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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Budding Web DeveloperKeen learnerAverage CoderDancer&Social Activist

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.