Fire

CSS

/* Fire — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Bungee', cursive (load from Google Fonts).
 */

.text-effect {
  font-family: 'Bungee', cursive;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
}

.text-effect {
  color: hsl(48 100% 92%);
  text-shadow:
    0 0 6.9px hsl(48 100% 60%),
    0 -2.0px 17.2px hsl(48 100% 60%),
    0 -4.0px 34.4px hsl(28 100% 52%),
    0 -6.0px 65.4px hsl(28 100% 52%),
    0 -8.0px 106.6px hsl(8 100% 48%);
  animation: text-effect-flicker 2.7s ease-in-out infinite;
}

@keyframes text-effect-flicker {
  0% { text-shadow:
    0 0 6.9px hsl(48 100% 60%),
    0 -1.4px 17.2px hsl(48 100% 60%),
    0 -2.8px 34.4px hsl(28 100% 52%),
    0 -4.2px 65.4px hsl(28 100% 52%),
    0 -5.6px 106.6px hsl(8 100% 48%);
    opacity: 1; }
  25% { text-shadow:
    0 0 6.9px hsl(48 100% 60%),
    0 -2.6px 17.2px hsl(48 100% 60%),
    0 -5.2px 34.4px hsl(28 100% 52%),
    0 -7.8px 65.4px hsl(28 100% 52%),
    0 -10.4px 106.6px hsl(8 100% 48%);
    opacity: .94; }
  50% { text-shadow:
    0 0 6.9px hsl(48 100% 60%),
    0 -1.8px 17.2px hsl(48 100% 60%),
    0 -3.6px 34.4px hsl(28 100% 52%),
    0 -5.4px 65.4px hsl(28 100% 52%),
    0 -7.2px 106.6px hsl(8 100% 48%);
    opacity: 1; }
  62% { text-shadow:
    0 0 6.9px hsl(48 100% 60%),
    0 -3.0px 17.2px hsl(48 100% 60%),
    0 -6.0px 34.4px hsl(28 100% 52%),
    0 -9.0px 65.4px hsl(28 100% 52%),
    0 -12.0px 106.6px hsl(8 100% 48%);
    opacity: .88; }
  78% { text-shadow:
    0 0 6.9px hsl(48 100% 60%),
    0 -2.0px 17.2px hsl(48 100% 60%),
    0 -4.0px 34.4px hsl(28 100% 52%),
    0 -6.0px 65.4px hsl(28 100% 52%),
    0 -8.0px 106.6px hsl(8 100% 48%);
    opacity: 1; }
  100% { text-shadow:
    0 0 6.9px hsl(48 100% 60%),
    0 -1.4px 17.2px hsl(48 100% 60%),
    0 -2.8px 34.4px hsl(28 100% 52%),
    0 -4.2px 65.4px hsl(28 100% 52%),
    0 -5.6px 106.6px hsl(8 100% 48%);
    opacity: 1; }
}

Related Elemental & Nature effects

• Aurora
• Gooey
• Ice