CodePen Embed - orJozZ

  <div class="container">
    <h1 class="neon">Channel Splitting!</h1>
    <h2 class="cmyk">CYMK Split!</h2>
    <h2 class="rgb">RGB Split!</h2>
  </div>

body {
  background: black;
  font-family: "Work Sans", sans-serif;
}

.container {
  width: 600px;
  margin: 0 auto;
  margin-top: 100px;
  text-align: center;
}

h1,
h2 {
  color: white;
  text-transform: uppercase;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 3rem;
}

.neon {
  text-shadow: 2px 2px 0px rgba(255, 0, 255, 1), -1px -1px 0px rgba(0, 0, 0, 1),
    -2px -3px 0px rgba(0, 255, 255, 1);
}

.cmyk {
  text-shadow: 3px 3px 0px rgba(0, 255, 255, 1),
    -3px 3px 0px rgba(255, 0, 255, 1), 1px -1px 0px rgba(0, 0, 0, 1),
    3px -3px 0px rgba(255, 255, 0, 1);
}

.rgb {
  text-shadow: 3px 3px 0px rgba(255, 0, 0, 1), -3px 3px 0px rgba(0, 255, 0, 1),
    3px -3px 0px rgba(0, 0, 255, 1);

  animation: rgb 0.5s;
  animation-iteration-count: infinite;
}

@keyframes rgb {
  32% {
    text-shadow: 3px 3px 0px rgba(255, 0, 0, 1), -3px 3px 0px rgba(0, 255, 0, 1),
      3px -3px 0px rgba(0, 0, 255, 1);
  }

  33% {
    text-shadow: 3px 3px 0px rgba(0, 255, 0, 1), -3px 3px 0px rgba(0, 0, 255, 1),
      3px -3px 0px rgba(255, 0, 0, 1);
  }

  65% {
    text-shadow: 3px 3px 0px rgba(0, 255, 0, 1), -3px 3px 0px rgba(0, 0, 255, 1),
      3px -3px 0px rgba(255, 0, 0, 1);
  }

  66% {
    text-shadow: 3px 3px 0px rgba(0, 0, 255, 1), -3px 3px 0px rgba(255, 0, 0, 1),
      3px -3px 0px rgba(0, 255, 0, 1);
  }

  98% {
    text-shadow: 3px 3px 0px rgba(0, 0, 255, 1), -3px 3px 0px rgba(255, 0, 0, 1),
      3px -3px 0px rgba(0, 255, 0, 1);
  }

  99% {
    text-shadow: 3px 3px 0px rgba(255, 0, 0, 1), -3px 3px 0px rgba(0, 255, 0, 1),
      3px -3px 0px rgba(0, 0, 255, 1);
  }
}

This Pen is owned by Jonathan M. Hethey on CodePen.

See more by @jonathanmh on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.