Neon text can add a nice, futuristic touch to any website. I’ve always loved the magic of neon signs, and wanted to recreate them using CSS. I thought I’d share some tips on how to do it! In this article, we’re going to take a look at how to add glowing effects to text. We’ll also take a look at various ways to animate the neon signs, all using CSS and keyframes. Show Here’s what we’ll be making: Adding a glow effect to textFirst,
let’s make the text glow. This can be done in CSS with the
Here’s what we get with that small bit of CSS: The next thing you might be wondering is what’s up with all of those values? How did I get those and why are there so many? First, we added white glow effects to the outer edges of the text’s letters with a small blur radius.
The last five values are wider text shadows of a larger blur radius that forms the green glow.
It’d be great if we could accomplish this with fewer than five shadows, but we need all these shadows so that they can be stacked over one another to add more depth to the glow. If we had used a single Go ahead and experiment with various hues and colors as well as blur radius sizes! There’s a huge variety of cool glow effects you can make, so try different variations — you can even mix and match colors where one color blends into another. The “flickering” effectOne 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! Let’s reach for
That’s really it! We’ve taken the exact same All that’s left is to call the animation where we want the light to flicker. In this particular case, let’s only add it to the
Note that if we did want the entire sign to flicker, then we could technically remove the It’s quite a cool effect, and adds more realism to our neon text! Of course, there are other effects you could try out too, which will also be explored further in this article. For example, how about more of a pulsating animation or a more subtle flicker? Let’s explore those and other effects! Pulsating glowWe just got a quick peek at this. It uses keyframes, just as the previous example does, where we specify the size of the blur radius at the start and end of the animation. We want the size of the blur radius to be smallest at the end of the animation, so we simply decrease the blur radius values for each
Once again, we add the animation to some element. We’ll go with
Here it is with it all put together: Subtle flickerWe can tone things down a bit and make the flickering action super subtle. All we need to do is slightly decrease the size of the blur radius in the
Since the flickering is
more subtle and the reduction of the blur radius is not as large, we should increase the number of times this animation occurs per second in order to emulate more frequent flickering. This can be done by decreasing the animation’s duration, say to a mere
Using a background imageIt would be really neat if our sign was hanging on a wall instead of empty space. Let’s grab a background image for that, maybe some sort of brick texture from Unsplash or something:
Adding a borderOne last detail we can add is some sort of circular or rectangular border around the sign. It’s just a nice way to frame the text and make it look like, you know, an actual sign. By adding a shadow to the border, we can give it the same neon effect as the text! Whatever element is the container for the text is
what needs a border. Let’s say we’re only working with an
We can round the corners of the border a bit so things aren’t so sharp by applying a
The last piece is the
glow! Now,
Notice that What about accessibility?If users have a preference for reduced motion, we’ll need to accommodate for this using the For example, we could modify the flashing animation from the Pen above so that users who have
It’s incredibly important to ensure that users’ preferences are catered for, and making use of this media query is a great way to make the effect more accessible for those with a preference for reduced motion. ConclusionHopefully this has shown you how to create cool neon text for your next project! Make sure to experiment with various fonts, blur radius sizes and colors and don’t forget to try out different animations, too — there’s a world of possibilities out there. And add a comment if you’ve created a neat shadow effect you want to share. Thanks for reading! |