Skip to content
Flickering Neon Sign Text With Only CSS
Profile icon
CalSch

I made flickering neon text with only CSS, and here's how!
It was pretty easy, I made an animation that changes the opacity pseudo-randomly, here are the keyframes:

@keyframes flicker { 0% { opacity: 100%; } 10% { opacity: 100%; } 11% { opacity: 0%; } 12% { opacity: 100%; } 13% { opacity: 0%; } 14% { opacity: 100%; } 30% { opacity: 100%; } 31% { opacity: 0%; } 32% { opacity: 100%; } 50% { opacity: 100%; } 51% { opacity: 0%; } 52% { opacity: 100%; } 70% { opacity: 100%; } 71% { opacity: 0%; } 73% { opacity: 0%; } 74% { opacity: 100%; } 90% { opacity: 100%; } 91% { opacity: 0%; } 92% { opacity: 100%; } 100% { opacity: 100%; } }

And different colors have different delays and duration.

That's all, Thanks for looking!

You are viewing a single comment. View All
Profile icon
MrVoo

Looks great! Not sure if it's possible, but if you want to make it more realistic try making the text brighter than the glow, and the glow more visible.

Profile icon
CalSch

@MrVoo
I've updated it now!