Creating a Blue Flame Particle System with CSS & JS
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.
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 Secret Sauce: Blend Modes
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.
1. The HTML
Our HTML is incredibly simple. We only need a container to hold our fire.
<div class="circle" id="circle"></div>
2. The CSS: Physics of Fire
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.
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;
}
Summary
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.
Creating a Blue Flame Particle System with CSS & JS | Hibuno