Rainbow Effect

index.html

<ul class="c-rainbow">
 <li class="c-rainbow__layer c-rainbow__layer--white">RAINBOW</li>
 <li class="c-rainbow__layer c-rainbow__layer--orange">RAINBOW</li>
 <li class="c-rainbow__layer c-rainbow__layer--red">RAINBOW</li>
 <li class="c-rainbow__layer c-rainbow__layer--violet">RAINBOW</li>
 <li class="c-rainbow__layer c-rainbow__layer--blue">RAINBOW</li>
 <li class="c-rainbow__layer c-rainbow__layer--green">RAINBOW</li>
 <li class="c-rainbow__layer c-rainbow__layer--yellow">RAINBOW</li>
</ul>

rainbow-effect.markdown

Rainbow Effect

A Pen by Mateus Generoso on CodePen.

License.

DEMO https://codemyui.com/wave-text-animation-with-rainbow-shadow/

style.scss

$root: '.c-rainbow';

:root {
 --color-background: #31037D;
 
 --axis-x: 1px;
 --axis-y: 1rem;
 --delay: 10;
 
 --color-black: #000;
 --color-white: #fff;
 --color-orange: #D49C3D;
 --color-red: #D14B3D;
 --color-violet: #CF52EB;
 --color-blue: #44A3F7;
 --color-green: #5ACB3C;
 --color-yellow: #DEBF40;
 
 --color-foreground: var(--color-white);
 --font-name: Righteous;
}

html, body {
 font-size: 24px;
}

body {
 background-color: var(--color-background);
 
 display: flex;
 align-items: center;
 justify-content: center;
 
 font-family: var(--font-name);
 
 height: 100vh;
}

#{$root} {
 counter-reset: rainbow;
 position: relative;
 display: block;
 
 list-style: none;
 
 padding: 0;
 margin: 0;
 
 &__layer {
  --text-color: var(--color-foreground);
  counter-increment: rainbow; 
  font-size: 3rem;
  color: var(--text-color);

  text-shadow:
   -1px -1px 0 var(--color-black),  
    1px -1px 0 var(--color-black),
    -1px 1px 0 var(--color-black),
     1px 1px 0 var(--color-black),
   
     4px 4px 0 rgba(0, 0, 0, .2);
  
  animation: rainbow 1.5s ease-in-out infinite;
  
  @for $i from 1 through 7 {
   &:nth-child(#{$i}) {
    animation-delay: calc( #{$i} / var(--delay) * 1s);
    left: calc(var(--axis-x) * #{$i});
    z-index: -#{$i * 10};
   }
  }
  
  &:not(:first-child) {
   position: absolute;
   top: 0;
  }

  &--white  { --text-color: var(--color-white)}
  &--orange { --text-color: var(--color-orange)}
  &--red    { --text-color: var(--color-red)}
  &--violet { --text-color: var(--color-violet)}
  &--blue   { --text-color: var(--color-blue)}
  &--green  { --text-color: var(--color-green)}
  &--yellow { --text-color: var(--color-yellow)}
 }
}

@keyframes rainbow {
 0%, 100% {
  transform: translatey(var(--axis-y)); 
 }
 50% {
  transform: translatey(calc(var(--axis-y) * -1));
 }
} 

styles

<link href="https://fonts.googleapis.com/css?family=Righteous&amp;display=swap" rel="stylesheet" />