Collection of hand-picked free HTML and CSS fire animation code examples. Update of January 2019 collections. 4 new items.

Related Articles

  1. CSS Water Effects

Author

  • Menashe Bouhadana

Links

Made with

  • HTML / CSS (SCSS)

About a code

SCSS Candle

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

Responsive: no

Dependencies: -

Author

  • Uwe Chardon

Links

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

Links

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: -

Demo image: Campfire Animation Campfire Animation - GIF Demo

Author

  • Jamie Coulter

Links

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: -

Demo image: CSS Spark CSS Spark - GIF Demo

Author

  • Ivan Grozdic

Links

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

Links

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

Links

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

Links

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: -

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

Author

  • Yusuke Nakaya

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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: -