<h1>Chromatic Aberration<small> with some animated effects - pure css magic</small></h1>

body{
  background:#000;
  color:#fff;
  text-align:center;
  font-family:"Trebuchet MS";
  text-transform:uppercase;
  padding-top:2em;
  
  background: linear-gradient(
    to bottom,
    #000,
    #000 50%,
    #222 50%,
    #222
  );
  background-size: 100% 4px;
  animation: gradientMove 200ms ease infinite;
}

h1{
    font-size:4em;
    text-shadow: 3px 2px 2px rgba(251, 12, 12,1), 0px -1px 3px rgba(12, 79, 251,.5),-3px 0px 2px rgba(52, 251, 12, 1);
animation: chromaticMove 4500ms ease infinite,pulse ease 200ms  infinite;
 
}
 small{
    display:block;
    text-transform:initial;
   font-size:24px;
    
  }
@keyframes gradientMove { 
    0%{background-size: 100% 4px}
    50%{background-size: 100% 2px}
    100%{background-size: 100% 4px}
}

@keyframes pulse { 
    0%{ opacity:.9;transform: skewX(.5deg);}
    25%{ opacity:1;}
    50%{opacity:.9;}
    75%{ opacity:1; transform:skewX(.5deg);}
    100%{opacity:.9;}
}
@keyframes chromaticMove { 
    0%{text-shadow: 3px 2px 2px rgba(251, 12, 12,1), 0px -1px 3px rgba(12, 79, 251,.5),0px 0px -2px rgba(52, 251, 12, 1);}
    50%{text-shadow: 3px 2px 2px rgba(251, 12, 12,1), 0px -1px 3px rgba(12, 79, 251,.5),-3px 2px 3px rgba(52, 251, 12, 1);}
    100%{text-shadow: 3px 2px 2px rgba(251, 12, 12,1), 0px -1px 3px rgba(12, 79, 251,.5),2px -1px 2px rgba(52, 251, 12, 1);}
}