← All elements
<div class="container">
<div class="red flame"></div>
<div class="orange flame"></div>
<div class="yellow flame"></div>
<div class="white flame"></div>
<div class="blue circle"></div>
<div class="black circle"></div>
</div>About this animation
A campfire-style flame built from rotated, rounded squares in red, orange, yellow and white that flicker together.
How it works
Four rounded squares in red, orange, yellow and white are rotated 45 degrees so they read as flame tips, each with a coloured box-shadow glow. The container runs a very fast alternating flicker animation that scales and nudges everything from its bottom edge, and two circles form the dark base.
Ways to customise it
- Change the colours of the four layers.
- Slow the flicker by raising the very short duration.
- Scale the whole flame with the width and height of the container.
Good to know
The flicker is quick, so users who are sensitive to motion should be offered a reduced-motion version. The flame is decorative and needs no alternative text.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.