Post thumbnail: 11 CSS Fire Animation

11 CSS Fire Animation

Collection of hand-picked free HTML and CSS fire animation code examples.


Related Articles

  1. CSS Water Effects

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

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

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

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

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

back to top