cssOMS/text.scss

.blurry-text {
    text-shadow: 0 0 .9rem #000;
    color: transparent;
}
/*
.white-3d {
    color: #fff;
    font-weight: bold;
    font-family: sans-serif;
    text-shadow:
        0 1px 0 #ccc,
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px rgba(0,0,0,.1),
        0 0 5px rgba(0,0,0,.1),
        0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2),
        0 5px 10px rgba(0,0,0,.25),
        0 10px 10px rgba(0,0,0,.2),
        0 20px 20px rgba(0,0,0,.15);
}

.rainbow {
    background: linear-gradient(90deg,#ab6bff,#9ad5f9 15%,#575df0 35%,#ab6bff 50%,#9ad5f9 65%,#575df0 85%,#ab6bff);
    background-size: 200% 100%;
    animation: rainbow-gradient 3.5s linear infinite;
    backface-visibility: hidden;
    background-clip: text;
    color: transparent;
    background-clip: text;
}

@keyframes rainbow-gradient {
    0% { background-position: 0; }
    100% { background-position: -100%; }
    0% { background-position: 0; }
    100% { background-position: -100%; }
}

$speed: 16s;
$wordCount: 7;

.morphing {
  position: relative;
  font-size: 120px;
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  filter: contrast(25) blur(1px);
}

.word {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: word $speed infinite ease-in-out;

  @for $i from 0 to $wordCount {
    &:nth-child(#{$i + 1}) {
      animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
    }
  }

  @keyframes word {
    0%, 5%, 100% { filter: blur(0px); opacity: 1; }
    20%, 80% { filter: blur(1em); opacity: 0; }
  }
}
*/