Glowing Green Fire Animation Using Pure CSS

This dynamic green fire animation is built entirely with HTML and CSS. It creates the visual effect of a pulsing flame surrounded by flickering particles, glowing effects, and slight motion to simulate the natural chaos of real fire. The animation is compact, centered, and loops infinitely, making it ideal for visually engaging UI elements, loading screens, or themed web effects.

Central Flame Structure

At the core of this animation is a main fire container that houses four key flame components: left, center, right, and bottom. These elements are layered on top of each other to simulate depth and complexity.

The center flame serves as the most prominent part. It has a soft green glow and pulses up and down continuously, using a stretching and shrinking motion to mimic the breathing quality of fire. The shape is skewed and rounded to give it a more organic look.

Flickering Side Flames

On either side of the main flame are the left and right flames. These aren’t just decorative—they introduce movement. The side flames tilt back and forth using a subtle shake animation. This adds variation and avoids the flame looking too uniform or static.

These flames are styled similarly to the center, but with slightly different sizes and positions, creating a sense of unpredictable flickering.

Floating Fire Particles

Each of the main flame sections includes particle elements, which simulate tiny sparks rising from the fire. These particles appear, float upward, and gradually fade out. The continuous cycling of this effect gives the animation its lively, combustive feeling.

The particles vary in size and start from slightly different positions across the flame, which enhances the randomness that’s typical in real fire.

Glowing Base Effect

Beneath the animated flames is a bottom layer that acts like a glowing ember. It uses a blur effect and a pulsing animation that changes its brightness over time. This base layer helps ground the flame visually and adds a soft glow that bleeds into the background.

Combined with a dark backdrop, the glowing base intensifies the fiery illusion and helps highlight the green color of the flames.

Fluid and Continuous Motion

All animations—scaling, glowing, floating, and shaking—are set to repeat infinitely. The various timing and easing functions applied to each part ensure the motion is never too robotic or mechanical. This helps the overall animation maintain a natural, immersive rhythm.

Despite the complexity of the visual effect, the entire fire animation is built using only HTML and CSS. There’s no JavaScript involved, which keeps the performance light and makes it easy to integrate into modern web designs.

This glowing green fire animation is a visually rich effect that adds energy and motion to a webpage without the need for images or scripts. It’s a great example of what’s possible with CSS alone.