Pure CSS to achieve cool neon light effect (with demo)

I have recently been following the CSS Animation Effects Tutorial series on YouTube, which introduces many interesting CSS animation effects. The first one is a very cool neon light effect. Here I will make a simple record and share the implementation idea.

This is the effect to be achieved:

You can see that when the mouse moves into the button, a neon light-like effect will be produced; when the mouse moves out of the button, a beam of light will move along a fixed trajectory (around the button).

Neon light realization

The implementation of neon light is relatively simple, and can be done using multiple shadows. We add three layers of shadows to the button, and the blur radius of each layer of shadow increases from the inside to the outside. When multiple shadows are superimposed together, an effect similar to neon light can be formed. The code for this section is as follows:

HTML:

 <div class="light">
    Neon Button
 </div>

CSS:

body {
 background: #050901;   
}
.light {
  width: fit-content;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform:uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}

The final effect is as follows:

Implementation of Moving Beams

Although it appears that only one beam is moving along the edge of the button, this is actually the superposition of four beams moving in different directions. Their directions of movement are: from left to right, from top to bottom, from right to left, and from bottom to top, as shown in the following figure:

During this process, the light beams intersect with each other. If you only look at the edge of the button, it looks like only one light beam is moving in a clockwise direction.
Here are a few points to note in the specific implementation:

• The four beams correspond to the four sub-divs of div.light. Their initial positions are at the leftmost, topmost, rightmost and bottommost of the button, and they move repeatedly in a fixed direction.
• Each beam is very small in height or width (only 2px) and has a gradient from transparent to neon, so it looks like a convergence (not a complete line).
• To ensure that what we see is a clockwise movement, the movement of the four beams is actually in order. First, the beam above the button starts to move, and after a while, the beam on the right moves, after a while, the beam below moves, and after a while, the beam on the left moves. There is a delay in the movement between light beams. Taking the upper and right light beams as an example, if they start moving at the same time, since the movement distance on the right is smaller than the movement distance on the top, the two light beams will miss the opportunity to intersect, and what we will see will be disconnected, incoherent light beams. Since the movement distance of the right beam is shorter, in order to allow the upper beam to "catch up" with it, we have to "delay the departure" of the right beam, so we need to give it an animation delay; similarly, the remaining two beams also need an animation delay. A delay of about 0.25 seconds between multiple animations is sufficient.
• It is enough to display the beam around the edge of the button, so set an overflow hidden for div.light

The code is as follows:

HTML:

<div class="light">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    Neon Button
</div>

CSS:

.light {
  position: relative;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform:uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
  overflow: hidden;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}
.light div {
  position: absolute;
}
.light div:nth-child(1){
  width: 100%;
  height: 2px;
  top: 0;
  left: -100%;
  background: linear-gradient(to right,transparent,#03e9f4);
  animation: animate1 1s linear infinite;
}
.light div:nth-child(2){
  width: 2px;
  height: 100%;
  top: -100%;
  right: 0;
  background: linear-gradient(to bottom,transparent,#03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
.light div:nth-child(3){
  width: 100%;
  height: 2px;
  bottom: 0;
  right: -100%;
  background: linear-gradient(to left,transparent,#03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
.light div:nth-child(4){
  width: 2px;
  height: 100%;
  bottom: -100%;
  left: 0;
  background: linear-gradient(to top,transparent,#03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

This will achieve the effect of the picture at the beginning of the article.

Neon lights in different colors

What if you want neon light effects in other colors? Do I need to modify the relevant colors again? In fact, we have a simpler method, which is to use filter:hue-rotate(20deg) to modify the hue/tone of div.light and all internal elements at once.

The hue-rotate() CSS function rotates the hue of an element and its contents.

The final effect is as follows:

This is the end of this article about how to achieve cool neon light effects with pure CSS (with demo). For more relevant CSS neon light content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!