JSFiddle - React, Tailwind, and code Playground

rainbow text

by greg gorlen

HTML

<div class="rainbow-text">Rainbow</div>

CSS

body {
  font-size: 11em;
  width: 95vw;
  height: 95vh;
  background: #000;
  color: #000;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes color-cycle {
  0% {
    color: red;
  }
  14% {
    color: orange;
  }
  28% {
    color: yellow;
  }
  42% {
    color: green;
  }
  56% {
    color: blue;
  }
  70% {
    color: indigo;
  }
  84% {
    color: violet;
  }
  100% {
    color: red;
  }
}

.color-cycling {
  animation: color-cycle 10s ease 0s infinite;
}

JavaScript

"use strict";

function rainbowTextify(cls, speed) {
  let classes = document.getElementsByClassName(cls);
  
  for (let i = 0; i < classes.length; i++) {
    let text = classes[i].innerText
    let result = "";
    
    for (let j = 0; j < text.length; j++) {
      result += "<span class='color-cycling'>" + 
                text[j] + "</span>";
    }
  
    classes[i].innerHTML = result;
  }
  
  let cycleObjs = document.getElementsByClassName("color-cycling");
  
  for (let i = 0; i < cycleObjs.length; i++) {
    cycleObjs[i].style.setProperty("animation-delay", (i * speed) + "s");
  }
}

rainbowTextify("rainbow-text", 0.5);