Home > Article > Web Front-end > Create a neon text display using HTML and CSS
Create a neon text display using HTML and CSS
- WBOYforward
- 2023-09-03 09:25:06987browse
Nowadays, creating neon text on web pages has become a trend to make it more attractive. We can create neon text on web pages to create an eye-catching effect that draws users' attention to the important information the web page contains.
We can use neon text with logos, titles, ads, etc. to highlight them. In this tutorial, we will customize the value of the text-shadow CSS property to create neon text.
grammar
Users can create neon text using HTML and CSS following the following syntax.
text-shadow: 0 0 1.5rem white;
We used the "text-shadow" CSS property in the above syntax to add a glow effect. It takes the horizontal offset as the first value, the vertical offset as the second value, the blur radius as the third value, and the color as the fourth value.
We always need to set the vertical and horizontal offset to 0. To generate the 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 create a basic neon effect for text using the "text-shadow" CSS property. We use multiple values with different border radii and colors to generate the neon effect.
In the output, the user can observe the text with 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 create a rainbow neon effect in the text. Here we have added text inside a div element.
We use 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. Additionally, we clip the background image in a text shape using the “-webkit-background-clip” CSS property.
Additionally, we use the “-webkit-text-fill-color” CSS property to fill the text with a transparent color. So it will be filled with the same color as the background. Additionally, we used the animated CSS property with “rainbow-keyframe” keyframes. In the keyframes, we change the amount of Hue Rotation to rotate the hues in the background.
In the output, the user 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 (Flashing Neon Text)
In the example below, we have created flashing neon text. Here, we use the “text-shadow” CSS property to add a neon effect to the text. Additionally, we use the "animation" attribute to add a blink animation. In the "blink" keyframe, we change the value of the "text-shadow" property.
In the output, we can see the flashing text with glow 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 add a gradient to text. We apply the gradient to the text using the "background-image" property.
In the output, the user can observe the text color with gradient. Additionally, users can change the color of the gradient by passing different color values to the Linear-gradient() function argument.
<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 only HTML and CSS. We learned to create advanced neon text from basic neon text with animations like rainbow effects and flashing effects.
The above is the detailed content of Create a neon text display using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!