Wow! Tube Light Effect using CSS

We all know how our old classical tube lights flicker before turning on, right?

So, what if we could make that effect using CSS?

Tube Light Effect Preview

Let’s see how we can do that!

HTML:

<div data-text="Hello World" class="light">Hello World</div>

Let us start styling!

CSS: Page

body {
  --var-color: rgb(0, 238, 255);
  background: #000;
  display: grid;
  font-family: sans-serif;
  place-items: center;
  height:100vh;
}

CSS: Div

.light {
  font-size: 2rem;
  color: var(--var-color);
  position: relative;
  font-weight: bold;
}

CSS: Pseudo Selector

.light::before {
  position: absolute;
  content: attr(data-text);
  text-shadow: 0px 0px 20px var(--var-color);
  filter: blur(10px) brightness(0);
  animation: flicker 2s linear forwards;
  animation-delay: 1s;
}

CSS: Main animation

@keyframes flicker {
  0% {
    filter: blur(5px) brightness(1);
  }
  3% {
    filter: blur(5px) brightness(0);
  }
  6% {
    filter: blur(5px) brightness(0);
  }
  7% {
    filter: blur(5px) brightness(1);
  }
  8% {
    filter: blur(5px) brightness(0);
  }
  9% {
    filter: blur(5px) brightness(1);
  }
  10% {
    filter: blur(5px) brightness(0);
  }
  20% {
    filter: blur(5px) brightness(1);
  }
  50% {
    filter: blur(5px) brightness(1);
  }
  99% {
    filter: blur(5px) brightness(0);
  }
  100% {
    filter: blur(5px) brightness(1);
  }
}

Here is the codepen:

So, this is it. Thanks for Reading 😊

Don’t forget to like and follow for more…

Instagram: @coding_dev_

Support: https://www.buymeacoffee.com/codingdev