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
VulcanWM