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 create Neon Light Button using HTML and CSS ?
- Text Animation with changing the color of the text using HTML & CSS
- What is the difference between display: inline and display: inline-block in CSS?
- HTML & CSS | Tabindex attribute & Navigation bars
- How to create long shadow of text without using text-shadow in HTML and CSS ?
- How to display HTML tags as plain text using PHP
- How to Create Image Overlay Hover using HTML & CSS ?
- How to create a Pie Chart using HTML & CSS ?
- Glowing Cube loader using HTML & CSS
- Display a Resized and Cropped Image using CSS
- Display div element on hovering over <a> tag using CSS
- How to insert spaces/tabs in text using HTML/CSS?
- How to wrap the text around an image using HTML and CSS ?
- How to Create a Cutout Text using HTML and CSS ?
- How to Create Liquid Filing Effect on Text using HTML and CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- Create a 3D Text Effect using HTML and CSS
- How to Add Image in Text Background using HTML and CSS ?
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.