Collection of hand-picked free HTML and CSS fire animation code examples. Update of January 2019 collections. 4 new items.
Related Articles
Links
Made with
- HTML / CSS (SCSS)
About a code
SCSS Candle
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
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: -


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


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


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
Links
Made with
- HTML / CSS (SCSS)
About a code
Fire
Responsive CSS bonfire.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -


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 usingmix-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 parentdiv
didn’t really cause a problem though.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Only CSS: Fire
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -


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

Links
Made with
- HTML / CSS
About the code
Animated Fire with SVG + CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
CSS Fire
Completely relative fire animation based off of https://dribbble.com/shots/2651843-Fire-loader
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
SVG CSS Fire Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML (Haml) / CSS (SCSS)
About the code
Fire in HTML and CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
CSS Flame Animation
An animated flame using only CSS3 animation
s and box-shadow
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -