Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Neon Text Display Using HTML & CSS
Creating neon text effects on web pages is a popular trend that adds visual appeal and draws user attention to important content. Neon text effects can be used for logos, headings, advertisements, and other elements to make them stand out. In this tutorial, we will use the text-shadow CSS property to create various neon text effects.
Syntax
text-shadow: horizontal-offset vertical-offset blur-radius color;
The text-shadow property creates the glow effect by accepting horizontal offset, vertical offset, blur radius, and color values. For neon effects, we typically set both offsets to 0 and use multiple shadow values with different blur radii and colors.
Example 1: Basic Neon Text
The following example creates a basic neon effect using multiple text-shadow values with different blur radii and colors
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px;
}
.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 style="color: white;">Creating <i>basic Neon text</i> using CSS</h2>
<div class="neon">Neon Text</div>
</body>
</html>
A glowing pink/magenta neon text "Neon Text" appears on a black background with multiple shadow layers creating the neon effect.
Example 2: Rainbow Neon Text
This example creates an animated rainbow neon effect using gradient backgrounds and CSS animations
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px;
}
.rainbow-neon {
font-size: 4rem;
background-image: linear-gradient(45deg, #f3626b, #6181ff, #a25bf2, #ffc100);
-webkit-background-clip: text;
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 style="color: white;">Creating <i>rainbow Neon text</i> using CSS</h2>
<div class="rainbow-neon">Rainbow Effect</div>
</body>
</html>
Text with animated rainbow colors that continuously cycle through different hues, creating a vibrant rainbow neon effect.
Example 3: Flickering Neon Text
This example creates a flickering neon effect that mimics the appearance of old neon signs
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px;
}
.flicker {
font-size: 4rem;
color: #fff;
text-shadow: 0 0 1.5rem white,
0 0 3.5rem white,
0 0 5rem white,
0 0 7rem #00ffff,
0 0 8rem #00ffff,
0 0 10rem #00ffff;
animation: flicker 1.5s linear infinite;
}
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow: 0 0 1.5rem white,
0 0 3.5rem white,
0 0 5rem white,
0 0 7rem #00ffff,
0 0 8rem #00ffff,
0 0 10rem #00ffff;
}
20%, 24%, 55% {
text-shadow: none;
}
}
</style>
</head>
<body>
<h2 style="color: white;">Creating <i>flickering Neon text</i> using CSS</h2>
<div class="flicker">Flickering Neon</div>
</body>
</html>
Cyan neon text that flickers on and off intermittently, simulating a broken or vintage neon sign effect.
Example 4: Gradient Neon Text
This example demonstrates how to create neon text with gradient colors
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px;
}
.gradient {
font-size: 3rem;
background-image: linear-gradient(45deg, #00dbde, #fc00ff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 20px rgba(0, 219, 222, 0.5),
0 0 40px rgba(252, 0, 255, 0.5);
}
</style>
</head>
<body>
<h2 style="color: white;">Creating <i>Gradient Neon text</i> using CSS</h2>
<div class="gradient">Gradient Neon Effect</div>
</body>
</html>
Text displaying a smooth gradient from cyan to magenta colors with a subtle glow effect around the letters.
Conclusion
Neon text effects can be created using CSS text-shadow properties, gradients, and animations. These techniques allow you to create eye-catching visual effects that enhance the appeal of your web content and draw user attention to important elements.
2K+ Views
