← All elements
<div class="wrapper">
<div class="cake">
<div class="lyr lyr-1"></div>
<div class="lyr lyr-2"></div>
<div class="lyr lyr-3"></div>
</div>
<div class="candle"></div>
<div class="flame">
<div class="smoke smk-1"></div>
<div class="smoke smk-2"></div>
<div class="smoke smk-3"></div>
<div class="smoke smk-4"></div>
<div class="smoke smk-5"></div>
<div class="flm-part flipped red"></div>
<div class="flm-part orng"></div>
<div class="flm-part flipped ylw"></div>
<div class="flm-part wht"></div>
</div>
</div>About this animation
A three-layer cake with a striped candle, a flickering flame and rising wisps of smoke, all drawn with CSS shapes and gradients.
How it works
The cake is three stacked elements with elliptical border radii that make the rounded layers, and the top one gets a radial gradient for the icing. A striped candle sits above, then a layered flame and three smoke puffs that each run their own burn keyframes, scaled down with a single transform so the whole scene fits.
Ways to customise it
- Change the layer colours of the cake.
- Edit the transform: scale() on the wrapper to resize.
- Slow the burn animations for a calmer flame.
Good to know
Purely decorative, so keep it out of the reading order or mark it aria-hidden. The scale on the wrapper means the layout size stays large, so position it with care.
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.