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

Fire in your heart.

Fire in your heart.

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

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

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

An animated flame using only CSS3 animations and box-shadow. Wanted to see if I could make fire with just CSS - flame on! :)

SVG filters and some random numbers in SASS (new fire every page-refresh).

Fire Circle on pure css

Based on CSS text shadow (Fire) by Line25: http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects

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.

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).

Based on the work of Dave Chenell

A page from the book Fahrenheit 451 catching fire for the Fire challenge. Lots of box shadows used to make the burn hole.