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.
<div class="container">
<h1>Lorem</h1>
</div>@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;
}
}