Search articles, tutorials, tips...
Learn how to build a procedural fire effect. This tutorial combines CSS blend modes for the glowing look and JavaScript to generate random particle movement.
Thanks for reading!
If you found this article helpful, maybe you could help share it.
Let's get acquainted with hibuno.com, Muhibbudin Suretno's personal portfolio, featuring free articles, tutorials, and open source projects.
A deep dive into complex CSS gradients and multiple backgrounds to recreate the iconic Jolly Roger of the Straw Hat Pirates. This artwork uses no images or SVG.
In this tutorial, we will create a magical blue flame effect. Unlike a static image, this fire is procedural. We use JavaScript to generate dozens of small particles and CSS to animate them upwards, creating a fluid, organic look.
The key to making the divs look like fire rather than just blue circles is mix-blend-mode: screen. When these particles overlap, their colors add up, creating intense white-hot centers and transparent edges.
Our HTML is incredibly simple. We only need a container to hold our fire.
<div class="circle" id="circle"></div>We use CSS Keyframes to define how a single particle behaves. It starts at the bottom, fades in, moves up (translateY), and eventually fades out while shrinking.
@keyframes rise {
from {
opacity: 0;
transform: translateY(0) scale(1);
}
25% {
opacity: 1;
}
to {
opacity: 1;
transform: translateY(-10em) scale(0);
}
}
@keyframes orbit {
from {
transform: translate(-50%, -50%) rotate(0deg) translateX(12em)
rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg) translateX(12em)
rotate(-360deg);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #080830;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.circle {
position: relative;
width: 40px;
height: 40px;
font-size: 24px;
transform: scale(0.5);
}
.fire {
filter: blur(0.02em);
position: absolute;
width: 10em;
height: 12em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.fire.orb {
z-index: 10;
}
.fire.around {
width: 6em;
height: 7.2em;
font-size: 16px;
animation: orbit 8s linear infinite;
}
.flame {
animation: rise 2s ease-out infinite;
background-image: radial-gradient(
#0080ff 10%,
#00a0ff 30%,
rgba(0, 160, 255, 0) 70%
);
border-radius: 50%;
mix-blend-mode: screen;
opacity: 0;
position: absolute;
bottom: 0;
width: 5em;
height: 5em;
}Writing 50 div elements manually is tedious. We use JavaScript to generate them. We also add randomness to the animation delays so the fire doesn't look like a repeating pattern.
const circle = document.getElementById("circle");
const flameCount = 50;
circle.appendChild(createFire("orb"));
for (let i = 0; i < 8; i++) {
circle.appendChild(createFire("around", i));
}
function createFire(className, index = null) {
const fire = document.createElement("div");
fire.className = `fire ${className}`;
for (let i = 0; i < flameCount; i++) {
const flame = document.createElement("div");
flame.className = "flame";
const delay = Math.random() * 1.5;
flame.style.animationDelay = `${delay}s`;
const duration = 1.2 + (Math.random() * 0.4 - 0.2);
flame.style.animationDuration = `${duration}s`;
const leftPosition = (i / (flameCount - 1)) * 100;
flame.style.left = `calc((100% - 5em) * ${leftPosition / 100})`;
fire.appendChild(flame);
}
if (index) {
fire.style.animationDelay = `${-index * 1}s`;
fire.style.setProperty("--angle", `${index * 45}deg`);
}
return fire;
}By generating many overlapping elements with slight random variations in speed and timing, we simulate the chaotic nature of real fire using standard DOM elements.