🔥 25+ Stunning CSS Fire Animations (100% Free)

Looking for a CSS fire animation? Here are the best ones we could find... totally free to use thanks to the authors and Codepen's generous open source licensing! Enjoy.

1. Only CSS: Fire

CSS Fire Animation - Only CSS: Fire
Fire in your heart.
Author: Yusuke Nakaya (YusukeNakaya)
Created on: August 2, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, animation, transition

2. SVG CSS Fire Animation

CSS Fire Animation - SVG CSS Fire animation
Author: Deepak K Vijayan (2xsamurai)
Created on: April 21, 2016
Made with: HTML, CSS

3. One Div Flame 🔥

CSS Fire Animation - One div flame 🔥
Author: Chalda Pnuzig (chalda)
Created on: December 21, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: cpc-fire, codepenchallenge

4. Box-Shadow Only, No Image Pixelart Campfire Animation

CSS Fire Animation - Box-Shadow Only, No Image Pixelart Campfire Animation
Author: Jamie Coulter (jcoulterdesign)
Created on: December 20, 2018
Made with: SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Haml
Tags: campfire, box-shadow, pixel-art, cpc-fire, codepenchallenge

5. CSS Spark Glowing Campfire Animation

CSS Fire Animation - CSS Spark Glowing Campfire Animation
Author: Ivan Grozdic (ig_design)
Created on: December 17, 2018
Made with: HTML, CSS, JS
Tags: cpc-fire, codepenchallenge, css, animation, transition

6. Only CSS: Fire

CSS Fire Animation - Only CSS: Fire
Fire in your heart.
Author: Yusuke Nakaya (YusukeNakaya)
Created on: August 2, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, animation, transition

7. CSS Blend Mode Fire

CSS Fire Animation - 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 or...
Read More
Author: Jon Kantner (jkantner)
Created on: June 13, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: pure-css, fire, flame, cpc-fire, codepenchallenge

8. Simple CSS-only Fire Animation

CSS Fire Animation - Simple CSS-only Fire Animation
Simple animation of fire using plain HTML & CSS 3. Yeah, there's so much 'magic number' here. You can free improve it if you want :)
Author: Satrio Yamanda (yamanda)
Created on: February 25, 2017
Made with: HTML, CSS
Tags: css3, fire, animation

9. CSS Flames

CSS Fire Animation - CSS Flames
Even more tinkering after learning some CSS animations from the following resources: http://www.fivesimplesteps.com/products/css-animations http://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship
Author: Brian Bravo (BrianBravo)
Created on: March 7, 2014
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css-animation, css, fire

10. Animated Fire With SVG + CSS

CSS Fire Animation - Animated fire with SVG + CSS
Author: Tahina (tahina)
Created on: January 27, 2017
Made with: HTML, CSS

11. CSS Flame Animation

CSS Fire Animation - CSS Flame Animation
An animated flame using only CSS3 animations and box-shadow. Wanted to see if I could make fire with just CSS - flame on! :)
Author: Adrian Payne (dazulu)
Created on: October 5, 2013
Made with: HTML, CSS, JS
Tags: css3, animation, flame, fire

12. Simple Fire Animation

CSS Fire Animation - Simple fire animation
SVG filters and some random numbers in SASS (new fire every page-refresh).
Author: Artyom (artyom-ivanov)
Created on: July 14, 2017
Made with: HTML, SCSS
Tags: fire, svg, filter, random

13. Fire Animation Using CSS

CSS Fire Animation - Fire Animation Using CSS
Author: KESHAV KUNDAL (keshav929)
Created on: March 19, 2017
Made with: HTML, CSS

14. CSS Fire

CSS Fire Animation - CSS Fire
Author: Zarko Rvovic (nocni_sovac)
Created on: July 21, 2020
Made with: HTML, SCSS
Tags: css, fire, animation, game

15. Fire Circle

CSS Fire Animation - Fire Circle
Fire Circle on pure css
Author: Andry Zirka (BlackStar1991)
Created on: August 17, 2020
Made with: HTML, CSS
Tags: fire, circle, filter, feturbulence

16. Animated Fire Text-Shadow

CSS Fire Animation - Animated Fire Text-Shadow
Based on CSS text shadow (Fire) by Line25: http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
Author: Antti Nyman (atnyman)
Created on: March 22, 2013
Made with: HTML, CSS
Tags: fire, animation, css3, text-shadow

17. Non-Generative CSS Fire

CSS Fire Animation - Non-Generative CSS Fire
A CSS fire that follows a fixed pattern rather than a randomly generated one. In the example by Sadface_RL, you start each part of the fire as a blob, and then use an imaginary curved line as a guide to adjust the shapes.
Author: Jon Kantner (jkantner)
Created on: January 31, 2019
Made with: HTML, CSS
Tags: fire, flame, pure-css, loop

18. CSS Fire

CSS Fire Animation - CSS fire
Hi! I'm playing a little bit with CSS and I've decided to try to make a fire. So far I've managed to get a kind of "low poly fire" which I quite like (although it can be improved, obviously).
Author: Danielkvist (danielkvist)
Created on: January 13, 2020
Made with: HTML, CSS, JS
Tags: fire, css, animation, bonfire, lowpoly

19. CSS Glowing Fire Ball Animation

CSS Fire Animation - CSS Glowing Fire Ball Animation
Author: Chenius (chenius)
Made with: HTML, CSS

20. Log Fire

CSS Fire Animation - Log Fire
Author: Adam Peter Cummings (adam-cummings)
Created on: August 27, 2020
Made with: HTML, CSS, JS
Tags: fire, camping, marshmellow, logs

21. Campfire Colony

CSS Fire Animation - Campfire Colony
Based on the work of Dave Chenell
Author: Jackie Zen (jackiezen)
Created on: October 21, 2019
Made with: HTML, CSS, JS
Tags: cpc-smooth-sharp, codepenchallenge, fire, trees, shadow

22. Fahrenheit 451 - CSS Fire

CSS Fire Animation - Fahrenheit 451 - CSS Fire
A page from the book Fahrenheit 451 catching fire for the Fire challenge. Lots of box shadows used to make the burn hole.
Author: reaganhenke (reaganhenke)
Created on: December 20, 2018
Made with: HTML, CSS
Tags: cpc-fire, codepenchallenge, animation, burn, fire