24 CSS Fire Animation

About a code

Play With Fire - Box Shadow Flames & Keyframes Animation

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

Responsive: no

Dependencies: -

About a code

Burning Match

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

Responsive: yes

Dependencies: -

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

About a code

SCSS Candle

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

Responsive: no

Dependencies: -

About a code

Flame Animation

Litte CSS animation with SVG.

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

Responsive: no

Dependencies: -

About the code

One Div Flame

Animated flame with HTML one div and CSS animation.

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

Dependencies: -

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

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

About the code

Campfire Animation

No image pixelart campfire animation. CSS box-shadow only.

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

Dependencies: -

About a code

CSS Animated Christmas Candles

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

Responsive: no

Dependencies: -

About a code

Cake and Candle

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

Responsive: no

Dependencies: -

About a code

Campfire: Pure CSS

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

Responsive: no

Dependencies: -

About the code

CSS Spark

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

Dependencies: bootstrap.css, jquery.js, popper.js, bootstrap.js

About a code

Fire

Responsive CSS bonfire.

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

Responsive: yes

Dependencies: -

About a code

Fire

A pure CSS campfire.

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

Responsive: yes

Dependencies: -

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

About a code

CSS Candle Flame Animation

Animated candle flame with pure CSS.

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

Responsive: no

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 https://dribbble.com/shots/2651843-Fire-loader

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