Welcome to our article featuring a carefully curated collection of CSS Fire Animations! In this compilation, we have hand-picked a selection of free HTML and CSS code examples that showcase the mesmerizing beauty and dynamic nature of fire animations. This update of November 2022 brings you 9 new items, sourced from popular platforms like CodePen, GitHub, and other valuable resources.

With the advancements in CSS and HTML, it is now easier than ever to incorporate realistic and visually stunning fire effects into your website. Each code example in this collection has been meticulously chosen to showcase the versatility and creativity of fire animations.

Whether you're looking to create a subtle flame effect in a logo or simulate a raging fire in a hero section, these code examples provide a solid foundation for achieving your desired visual impact.

So, join us as we explore this collection of CSS Fire Animations, sourced from various platforms. Whether you're a seasoned developer or a beginner, this compilation offers inspiration and practical solutions for incorporating captivating fire effects into your web design.

Get ready to set your design ablaze with this collection of hand-picked CSS fire animation code examples.

Author

  • Patrick Freedom Mayer

Made with

  • HTML / CSS (SCSS) / JS

About a code

Play With Fire - Box Shadow Flames & Keyframes Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Alvaro Montoro

Made with

  • HTML / CSS

About a code

Burning Match

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jess

Made with

  • HTML / CSS (SCSS)

About a code

Sparks Float Up From A Blazing Fire

CSS Animation of sparks floating up from a blazing fire.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Menashe Bouhadana

Made with

  • HTML / CSS (SCSS)

About a code

SCSS Candle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Uwe Chardon

Made with

  • HTML / CSS

About a code

Flame Animation

Litte CSS animation with SVG.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: One Div Flame One Div Flame - GIF Demo

Author

  • Chalda Pnuzig

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

One Div Flame

Animated flame with HTML one div and CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • reaganhenke

Made with

  • HTML / CSS

About a code

Fahrenheit 451 - Fire

Lots of box shadows used to make the burn hole.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Guilmain Dorian

Made with

  • HTML (Pug) / CSS (Less)

About a code

Fireplace

What is it about a fireplace that draws you to its flame? Is it the warmth created like a sun that came and shone upon your body with the intensity of heat? Or is it the comfortable feeling which makes you feel replete? The flicker and the crackle, the sizzle that you hear invites your senses to remain close to the hearth and peer hypnotically tranquilized quietly taking a rest like a bird in sunshine in a cozy, cozy nest.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Campfire Animation Campfire Animation - GIF Demo

Author

  • Jamie Coulter

Made with

  • HTML / CSS (SCSS)

About the code

Campfire Animation

No image pixelart campfire animation. CSS box-shadow only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • CSS Animated Christmas Candles

Made with

  • HTML / CSS

About a code

CSS Animated Christmas Candles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ludo

Made with

  • HTML / CSS

About a code

Cake and Candle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Kyle Wetton

Made with

  • HTML / CSS (SCSS)

About a code

Campfire: Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS Spark CSS Spark - GIF Demo

Author

  • Ivan Grozdic

Made with

  • HTML / CSS / JavaScript

About the code

CSS Spark

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, jquery.js, popper.js, bootstrap.js

Author

  • Romina

Made with

  • HTML / CSS (SCSS)

About a code

Fire

Responsive CSS bonfire.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Rose Liu

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Fire

A pure CSS campfire.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Blend Mode Fire CSS Blend Mode Fire - GIF Demo

Author

  • Jon Kantner

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Blend Mode Fire

While I was experimenting with SpriteKit fire particles in Xcode, I thought of how easy it would be to create something similar in CSS using mix-blend-mode. For this to perform as best as possible, I used orange-to-transparent radial gradients for each particle instead of blurring solid orange ones. Slightly blurring the non-moving parent div didn’t really cause a problem though.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • Mamun Khandaker

Made with

  • HTML / CSS

About a code

CSS Candle Flame Animation

Animated candle flame with pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Only CSS: Fire Only CSS: Fire - GIF Demo

Author

  • Yusuke Nakaya

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Only CSS: Fire

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Simple CSS-Only Fire Animation Simple CSS-Only Fire Animation - GIF Demo

Author

  • Satrio Yamanda

Made with

  • HTML / CSS

About the code

Simple CSS-Only Fire Animation

Simple animation of fire using plain HTML & CSS3.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Fire with SVG + CSS

Author

  • Tahina

Made with

  • HTML / CSS

About the code

Animated Fire with SVG + CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: SVG CSS Fire Animation SVG CSS Fire Animation - GIF Demo

Author

  • Deepak K Vijayan

Made with

  • HTML / CSS

About the code

SVG CSS Fire Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Fire in HTML and CSS Fire in HTML and CSS - GIF Demo

Author

  • Brian Bravo

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Fire in HTML and CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Flame Animation CSS Flame Animation - GIF Demo

Author

  • Adrian Payne

Made with

  • HTML / CSS

About the code

CSS Flame Animation

An animated flame using only CSS3 animations and box-shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -