1. Tutorials
  2. CSS
  3. Blazing Fire Effect

Blazing Fire Effect

In this tutorial, you will learn how to apply a blazing fire effect to a text using CSS. Multiple text shadows are added to achieve the blazing effect. Watch the video below for a detailed tutorial.

HTML

<div class="container">
    <h1>Lorem</h1>
</div>

CSS

@import  url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap');

body {
  font-family: 'Kalam', cursive;
  background: #2e3537;
}

.container {
  margin: 8rem auto;
  text-align: center;
}

h1 {
  display: inline-block;
  color: #fa7101;
  font-size: 120px;
  text-shadow: 
    0 3px 20px red,
    0 0 20px red,
    0 0 10px orange,
    4px -5px 6px yellow,
    -4px -10px 10px yellow,
    0 -10px 30px yellow;
  animation: animate 2s infinite alternate linear;
}

@keyframes  animate {
  0% {
    text-shadow: 
      0 3px 20px red,
      0 0 20px red,
      0 0 10px orange,
      0 0 0 yellow,
      0 0 5px yellow,
      -2px -5px 5px yellow,
      4px -10px 10px yellow;
  }
  25% {
    text-shadow: 
      0 3px 20px red,
      0 0 30px red,
      0 0 20px orange,
      0 0 5px yellow,
      -2px -5px 5px yellow,
      3px -10px 10px yellow,
      -4px -15px 20px yellow;
  }
  50% {
    text-shadow: 
      0 3px 20px red,
      0 0 20px red,
      0 -5px 10px orange,
      -2px -5px 5px yellow,
      3 -10px 10px yellow,
      -4px -15px 20px yellow,
      2px -20px 30px rgba(255,255,0,0.5);
  }
  75% {
    text-shadow: 
      0 3px 20px red,
      0 0 20px red,
      0 -5px 10px orange,
      3 -5px 5px yellow,
      -4px -10px 10px yellow,
      2px -20px 30px rgba(255,255,0,0.5),
      0 -25px 40px rgba(255,255,0,0);
  }
  100% {
    text-shadow: 
      0 3px 20px red,
      0 0 20px red,
      0 0 10px orange,
      0 0 0 yellow,
      0 0 5px yellow,
      -2px -5px 5px yellow,
      4px -10px 10px yellow;
  }
}