<div class="container">
  <span>W</span>
  <span>E</span>
  <span>L</span>
  <span>C</span>
  <span>O</span>
  <span>M</span>
  <span>E</span>
  <span>!</span>
  <span>W</span>
  <span>3</span>
  <span>C</span>
  <span>P</span>
  <span>L</span>
  <span>U</span>
  <span>S</span>
  <span>.</span>
  <span>C</span>
  <span>O</span>
  <span>M</span>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Exo", Arial, sans-serif;
  background-color: #151522;

  gap: 15px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vw;
}

@property --hue {
  initial-value: 0;
  inherits: false;
  syntax: "<number>";
}

@keyframes rainbow {
  to {
    --hue: 360;
  }
}

span {
  color: hsl(var(--hue) 80% 50%);
  text-shadow: 1px 1px 0 hsl(calc(var(--hue) / 2) 80% 50%),
    2px 2px 0 hsl(calc(var(--hue) / 3) 80% 50%),
    3px 3px 0 hsl(calc(var(--hue) / 4) 80% 50%),
    5px 5px 0 hsl(calc(var(--hue) / 5) 80% 50%),
    6px 6px 0 hsl(calc(var(--hue) / 6) 80% 50%),
    7px 7px 0 hsl(calc(var(--hue) / 7) 80% 50%),
    8px 8px 0 hsl(calc(var(--hue) / 8) 80% 50%),
    9px 9px 0 hsl(calc(var(--hue) / 9) 80% 50%),
    10px 10px 0 hsl(calc(var(--hue) / 10) 80% 50%);
  font-size: 5vw;
  display: inline-flex;
  animation: rainbow 2s linear calc(var(--index, 0) * -0.2s) infinite;
}

const letterEles = document.querySelectorAll(".container > span");

for (var i = 0, len = letterEles.length; i < len; i++) {
  letterEles[i].style.setProperty("--index", i);
}