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.

Author

  • Patrick Freedom Mayer

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

Author

  • Alvaro Montoro

Made with

  • HTML / CSS

About a code

Burning Match

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

Responsive: yes

Dependencies: -

Author

  • Jess

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

Author

  • Menashe Bouhadana

Made with

  • HTML / CSS (SCSS)

About a code

SCSS Candle

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

Responsive: no

Dependencies: -

Author

  • Uwe Chardon

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

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

Author

  • reaganhenke

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

Author

  • Guilmain Dorian

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

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

Author

  • CSS Animated Christmas Candles

Made with

  • HTML / CSS

About a code

CSS Animated Christmas Candles

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

Responsive: no

Dependencies: -

Author

  • Ludo

Made with

  • HTML / CSS

About a code

Cake and Candle

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

Responsive: no

Dependencies: -

Author

  • Kyle Wetton

Made with

  • HTML / CSS (SCSS)

About a code

Campfire: Pure CSS

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

Responsive: no

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

Author

  • Romina

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

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

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

Author

  • Mamun Khandaker

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

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