Flickering Neon Sign Text With Only CSS

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

Comments

hot new top

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

[deleted]

@VulcanWM

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

Profile icon

VulcanWM

I-

@GhostKing007

Profile icon

[deleted]

kekw

@VulcanWM

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.

I've updated it now!

plz add this to my website
https://replit.com/@LordCrazyOfLife/Velcrom?c=156872

nice

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

Flickering Neon Sign Text With Only CSS

And different colors have different delays and duration..css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

Comments

And different colors have different delays and duration.