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
Nathanielx3rd

Damn Calsch, as a fellow front-end dev I wanna say good job on this. Maybe try flickering and changing its color at the same time. Ans also you can add a "rainy day" themed background to really make it pop.