An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
How to create neon text using vanilla CSS
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 texts 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 dont forget to try out different animations, too. Leave a comment if youve created a neat shadow effect you want to share.
Thanks for reading.
Original Link: https://dev.to/amirlotfi/how-to-create-neon-text-using-vanilla-css-19k7
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To