Neon Text Display Using HTML & CSS - GeeksforGeeks

31 Jul, 2019
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:
<!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>
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.
<!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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Making a div vertically scrollable using CSS
Build a Survey Form using HTML and CSS
CSS | Text Formatting
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?