Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Neon Text Display Using HTML & CSS
Nowadays, creating Neon text on the web page is a trend to make it attractive. We can create a Neon text on the web page to generate an eye-catching effect and draw a user’s attention towards the important information that the web page contains.
We can use neon texts with logos, heading, advertisements, etc., to highlight them. In this tutorial, we will customize the values of the text-shadow CSS property to create neon text.
Syntax
Users can follow the syntax below to create neon text using HTML and CSS.
text-shadow: 0 0 1.5rem white;
We used the ‘text-shadow’ CSS property in the above syntax to add the glow effect. It takes horizontal offset as a first value, vertical offset as a second value, blur radius as a third value, and color as a fourth value.
We always need to set 0 for the vertical and horizontal offset. To generate a neon effect, we need to use multiple values with different colors and blur radius for the text-shadow CSS property.
Example 1 (Basic Neon Text)
In the example below, we created the basic neon effect for the text using the ‘text-shadow’ CSS property. We used multiple values with different border-radius and colors to generate the neon effect.
In the output, users can observe the text with a neon effect.
<html>
<head>
<style>
.neon {
font-size: 5rem;
color: white;
font-family: 'Arial', sans-serif;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
</style>
</head>
<body>
<h2> Creating the <i> basic Neon text </i> using the CSS. </h2>
<div class = "neon"> Neon Text </div>
</html><html>
<head>
<style>
.neon {
font-size: 5rem;
color: white;
font-family: 'Arial', sans-serif;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
</style>
</head>
<body>
<h2> Creating the <i> basic Neon text </i> using the CSS. </h2>
<div class = "neon"> Neon Text </div>
</html>
Example 2 (Rainbow Neon Text)
In the example below, we created the rainbow neon effect in the text. Here, we added the text in the div element.
We used the ‘background-image’ CSS property in CSS to add a linear gradient as the background. We applied a linear gradient of 4 different colors at 45 degrees. Also, we used the ‘-webkit-background-clip’ CSS property to clip the background image in the shape of the text.
Furthermore, we used the ‘-webkit-text-fill-color’ CSS property to fill the transparent color into the text. So, it will fill the same color as the background. Also, we used the animation CSS property with the ‘rainbow-keyframe’ keyframes. In the keyframes, we change the degree of ‘hue-rotate’ to rotate the hue in the background.
In the output, users can observe the rainbow effect in the text.
<html>
<head>
<style>
.rainbow-neon {
font-size: 5rem;
background-image: linear-gradient(45deg, #f3626b, #6181ff, #a25bf2, #ffc100);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow-keyframe 3s linear infinite;
}
@keyframes rainbow-keyframe {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<h2> Creating the <i> rainbow Neon text </i> using the CSS </h2>
<div class="rainbow-neon"> It's raining actually. </div>
</body>
</html>
Example 3 (Flickering Neon Text)
In the example below, we created the flickering neon text. Here, we used the ‘text-shadow’ CSS property to add a neon effect to the text. Also, we used the ‘animation’ property to add the flickering animation. In the ‘flickering’ keyframes, we change the value of the ‘text-shadow’ property.
In the output, we can see the flickering text with the glowing effect.
<html>
<head>
<style>
.flicker {
font-size: 4rem;
color: blue;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
color: #fff;
animation: flicker 0.5s linear infinite;
}
@keyframes flicker {
0%, 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95%, 100%
{ text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
1%, 6%, 11%, 16%, 21%, 26%, 31%, 36%, 41%, 46%, 51%, 56%, 61%, 66%, 71%, 76%, 81%, 86%, 91%, 96%
{
text-shadow: none;
}
}
</style>
</head>
<body>
<h2> Creating the <i> flickering Neon text </i> using the CSS. </h2>
<div class = "flicker"> This text is flickering. </div>
</body>
</html>
Example 4 (Gradient Neon Text)
In the example below, we added the gradient to the text. We used the ‘background-image’ property to apply the gradient to the text.
In the output, users can observe the text color with a gradient. Also, users can change the colors of the gradient by passing different color values to the linear-gradient() function parameters.
<html>
<head>
<style>
.gradient {
font-size: 3rem;
background-image: linear-gradient(45deg, #00dbde, #fc00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h2> Creating the <i> Gradient Neon text </i> using the CSS. </h2>
<div class = "gradient"> Check gradient in Neon text </div>
</body>
</html>
Users learned to create neon text using HTML and CSS only. We learned to create from basic neon text to advance neon text containing the animations such as rainbow effect and flickering effect.
690 Views
