<h1 class="glowing-text">Fire</h1>
  body {
  background-color:#000;
}
.glowing-text{
  color:#fff;
  font-size:8em;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  text-shadow: 0px -1px 2px white,
  0px -3px 6px rgba(255,200,200,1),
  0px -6px 12px rgba(255,150,100,1),
  0px -10px 20px rgba(255,100,100,1),
  0px -15px 30px rgba(255,50,50,1),
  0px -21px 42px rgba(255,0,0,1);
  animation:fire 0.01s ease infinite,colorSpin 10s linear infinite;
  font-family:Sans-serif;
  
}
@keyframes fire{
  50%{
    text-shadow:0px -4px 8px white,
  0px -12px 24px rgba(255,200,200,1),
  0px -24px 48px rgba(255,150,100,1),
  0px -40px 80px rgba(255,100,100,1),
  0px -60px 120px rgba(255,50,50,1),
  0px -84px 168px rgba(255,0,0,1);
  
    }
}

@keyframes colorSpin{
  to{filter:hue-rotate(360deg)}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.