<!DOCTYPE html>
<html>
<body>
<pre><h1>Example        Text</h1></pre>
</body>
</html>
html {background: black;}

h1 {
animation-name: TextShadowing;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: unset;
font-family: “Open Sans”, sans-serif;
font-size: 100px;
text-align: center;
color: #8B488F;
}		


@keyframes TextShadowing {
0%  {  text-shadow: 5px -5px 5px #000, 10px -10px 10px #E80CD8,  0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
14% {  text-shadow: -5px -5px 5px #000, -10px -10px 10px #E80CD8, 0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
28% {  text-shadow: -5px 0px 5px #000, -10px 0px 10px #E80CD8,   0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
42% {  text-shadow: -5px 5px 5px #000, -10px 10px 10px #E80CD8,  0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
56% {  text-shadow: 0px 5px 5px #000, 0px 10px 10px #E80CD8,    0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
70% {  text-shadow: 5px 5px 5px #000, 10px 10px 10px #E80CD8,   0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
84% {  text-shadow: 5px 0px 5px #000, 10px 0px 10px #E80CD8,    0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
100% { text-shadow: 5px -5px 5px #000, 10px -10px 10px #E80CD8,  0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }		
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.