Skip to content
← Back to Community
Flickering Neon Sign Text With Only CSS
Profile icon
h
has Hacker Plan
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!

Voters
Profile icon
Bookie0
Profile icon
SilvermoonCat
Profile icon
SixBeeps
Profile icon
jihhyuu202
Profile icon
SumaitaAlam
Profile icon
figglediggle
Profile icon
Nathanielx3rd
Profile icon
HenryShears
Profile icon
VulcanWM
Profile icon
DynamicSquid
Comments
hotnewtop
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.

Profile icon
VulcanWM

Nice! I read it as a swear word help

Profile icon
GhostKing007

@VulcanWM have you considered completely leaving the internet? It is the solution to your problem

Profile icon
VulcanWM
Profile icon
GhostKing007
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!

Profile icon
LordCrazyOfLife
Profile icon
lilykhan

nice

Profile icon
CoderGautamYT

I never thought you can do this much with CSS, dang