RGB LED HR

The following effect, which is a hr element made to look like scrolling LED lighting, is created using the CSS below.

hr.rainbow {
  margin: 0;
  border: none;
  height: 8px;
  background: linear-gradient(
    45deg,
    rgba(255, 60, 75, 1),
    rgba(255, 107, 73, 1),
    rgba(255, 182, 95, 1),
    rgba(0, 250, 154, 1),
    rgba(0, 221, 238, 1),
    rgba(30, 124, 255, 1),
    rgba(189, 111, 255, 1),
    rgba(255, 60, 75, 1)
  );
  background-size: 200%;
  animation: scrolling-rainbow 6s linear infinite;
}

hr.rainbow::before {
  content: "";
  background: linear-gradient(
    45deg,
    rgba(255, 60, 75, 1),
    rgba(255, 107, 73, 1),
    rgba(255, 182, 95, 1),
    rgba(0, 250, 154, 1),
    rgba(0, 221, 238, 1),
    rgba(30, 124, 255, 1),
    rgba(189, 111, 255, 1),
    rgba(255, 60, 75, 1)
  );
  background-size: 200%;
  position: absolute;
  height: 16px;
  width: 100%;
  z-index: -1;
  filter: blur(8px);
  opacity: 0.5;
  animation: scrolling-rainbow 6s linear infinite;
}

@keyframes scrolling-rainbow {
  0% {background-position: 0% 0%;}
  50% {background-position: 100% 100%;}
  100% {background-position: 200% 200%;}
}

While I initially thought of and designed this to mimic LEDs, it could also be applied to other animated, scrolling gradients. I also did not initially have the “glow” effect on this animation – which was adding using the ::before pseudo-element. The glow intensity is adjusted using the opacity and blur filter.

Timothy's Dev Stuff

RGB LED HR