Creating realistic effects using CSS can add an engaging and dynamic element to your web projects. One such effect is the simulation of a flickering fire, which can be achieved through clever use of CSS properties and keyframes. This guide will walk you through the steps to create a realistic fire effect purely with HTML and CSS.
Understanding the Structure
The HTML structure for the fire effect is straightforward. It consists of a div container that holds several child div elements, each representing a different layer of the flame. These layers are styled and animated to create the illusion of a flickering fire.
Styling the Flames
The core of the fire effect lies in the CSS. Each flame layer is styled with specific dimensions, colors, and box shadows to mimic the different colors seen in real fire. The layers are then animated using CSS keyframes to simulate the natural flickering motion of flames.
Key Elements of the CSS
- Background and Container: The body has a black background to enhance the visibility of the flames. The container uses flexbox for centering the flame elements both vertically and horizontally.
- Flame Layers: Different classes (.red, .orange, .gold, .white) define the appearance of each flame layer. The
box-shadowproperty is used to add a glowing effect around each layer, whileborder-radiusandtransformproperties help in shaping the flames. - Animation: The
@keyframes flickerrule is defined to create a flickering effect by slightly rotating and scaling the flame elements. This animation is applied to theflame-wrapperto make the entire structure flicker in a realistic manner.
Putting It All Together
Below is the full HTML and CSS code for creating the fire effect. You can copy and paste this code into your project to see the effect in action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fire Effect</title>
<style>
body {
background-color: black;
color: #fff;
}
.container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.source {
text-align: right;
width: 100%;
}
.source a {
color: #c2c2c2;
font-size: .7rem;
text-decoration: none;
}
.red {
width: 80px;
height: 80px;
background: orangered;
box-shadow: 0px 0px 10px 5px orangered;
}
.orange {
width: 60px;
height: 60px;
left: 10px;
background: orange;
box-shadow: 0px 0px 12px 6px orange;
}
.gold {
width: 45px;
height: 45px;
background: gold;
left: 18px;
box-shadow: 0px 0px 9px 4px gold;
}
.white {
width: 35px;
height: 35px;
background: lightyellow;
left: 23px;
box-shadow: 0px 0px 9px 4px lightyellow;
}
.blue {
width: 15px;
height: 15px;
background: darkblue;
left: 32px;
box-shadow: 0px 0px 15px 10px darkblue;
}
.black {
width: 40px;
height: 40px;
background: black;
bottom: -50px;
left: 20px;
box-shadow: 0px 0px 15px 10px black;
}
.base {
border-radius: 50%;
position: absolute;
}
.flame-wrapper {
position: relative;
margin: auto;
animation: flicker .1s ease-in infinite;
}
.flame {
bottom: 0;
position: absolute;
border-radius: 50% 0% 50% 50%;
transform: rotate(-45deg);
}
@keyframes flicker {
0% {transform: rotate(-1deg);}
20% {transform: rotate(2deg) scaleY(1.05);}
40% {transform: rotate(-1deg);}
60% {transform: rotate(1deg);}
80% {transform: rotate(-1deg) scaleY(0.90);}
100% {transform: rotate(1deg);}
}
</style>
</head>
<body>
<div class="container">
<div class="flame-wrapper">
<div class="flame red"></div>
<div class="flame orange"></div>
<div class="flame gold"></div>
<div class="flame white"></div>
<div class="base blue"></div>
<div class="base black"></div>
</div>
<div class="source">
<a href="https://redstapler.co/easy-realistic-css-fire-effect/">source RED STAPLER</a>
</div>
</div>
</body>
</html>