This content originally appeared on DEV Community and was authored by Amir-Lotfi
Learn how to implement neon effects using CSS, a technique for adding glowing to text.
To add a glow effect to the text, we need text-shadow property. The text-shadow property accepts a comma-separated list of shadows that applies to the text. Each shadow is described by some combination of X and Y offsets from the text, blur radius, and color.
text-shadow: [x-offset] [y-offset] [blur-radius] [color];
Creating glow effect
First, we need to add a white glow to the outer edges of the text’s letters with a small blur radius. Next, we add the red glow by adding multiple shadows separated by a comma. We need all these shadows so that they can be stacked over one another to add more depth to the glow. To increase the size of the glow effect, we would increase the blur radius of shadows.
.neon-text {
text-shadow:
#FFFFFF 0 0 12px,
#A91079 0 0 25px,
#A91079 0 0 35px,
#A91079 0 0 45px;
text-align: center;
font-size: 2.5rem;
color: #fff;
}
Adding the flickering effect
One thing you might notice about neon signs is that some of them — particularly older ones — tend to flicker. The light kind of goes in and out. We can do the same sort of thing with CSS animations.
To achieve that, we create a custom animation named neon using @keyframes. Then we move the shadows to the keyframe. The keyframe should apply and completely remove the shadows at chosen points during animation to create the flickering effect.
@keyframes neon {
0%, 18%, 22%, 25%, 53%, 57%, 100% {
text-shadow:
#FFFFFF 0 0 12px,
#A91079 0 0 25px,
#A91079 0 0 35px,
#A91079 0 0 45px;
}
20%, 24%, 55% {
text-shadow: none;
}
}
Finally, we call the animation where we want the light to flicker.
.neon-text {
animation: neon 3s infinite alternate;
text-align: center;
font-size: 2.5rem;
color: #fff;
}
You can see the working animation and play with the final code at nexuscode.online
Challenge your skills
Fork the code in the link above and experiment with various hues and colors as well as blur radius sizes, and don’t forget to try out different animations, too. Leave a comment if you’ve created a neat shadow effect you want to share.
Thanks for reading.
This content originally appeared on DEV Community and was authored by Amir-Lotfi
Amir-Lotfi | Sciencx (2022-06-28T05:00:07+00:00) How to create neon text using vanilla CSS. Retrieved from https://www.scien.cx/2022/06/28/how-to-create-neon-text-using-vanilla-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.