Collection of hand-picked free HTML and CSS fire animation code examples from Codepen, Github and other resources. Update of February 2021 collections. 9 new items.
Links
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: -
Links
Made with
- HTML / CSS
About a code
Burning Match
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
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
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: -
Links
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: -


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
About a code
CSS Animated Christmas Candles
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Cake and Candle
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Campfire: Pure CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
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 / CSS
About a code
CSS Candle Flame Animation
Animated candle flame with pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
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: -