11 CSS Fire Animation
Collection of hand-picked free HTML and CSS fire animation code examples.
About the code
One Div Flame
Animated flame with HTML one div and CSS animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
Campfire Animation
No image pixelart campfire animation. CSS box-shadow only.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
CSS Spark
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: bootstrap.css, jquery.js, popper.js, bootstrap.js
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 parentdivdidn’t really cause a problem though.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
About the code
Only CSS: Fire
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
About the code
Simple CSS-Only Fire Animation
Simple animation of fire using plain HTML & CSS3.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
Animated Fire with SVG + CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
CSS Fire
Completely relative fire animation based off of dribbble.com/shots/26518…
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
About the code
SVG CSS Fire Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
Fire in HTML and CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
CSS Flame Animation
An animated flame using only CSS3 animations and box-shadow.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
