Looks great! Not sure if it's...

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!

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!

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;}

And different colors have different delays and duration.