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.
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.
- How to display HTML tags as plain text using PHP
- HTML | DOM Style display Property
- Hide or show elements in HTML using display property
- HTML | Text Formatting
- HTML | DOM Input Text Object
- HTML | DOM Input Text name Property
- HTML | DOM Option text Property
- HTML | DOM Script text Property
- HTML | DOM Anchor Text Property
- HTML | DOM Input Text value Property
- HTML | <input type="text">
- HTML | DOM Title text Property
- HTML | body text Attribute
- How to align Placeholder Text in HTML ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.