
Demo:
To create the CSS Birthday Cake animation follow the steps below and watch the video tutorial.
- Add HTML
- Add CSS
- Add CSS Animation
Step 1.
Add HTML
<div class="birthday-cake">
<div class="holder"></div>
<div class="shadow"></div>
<div class="cake">
<div class="chocolate"></div>
</div>
<div class="candle"></div>
<div class="flame"></div>
</div>
Step 2.
Add CSS
Set the colour and the position of the background and elements:
body {
background-color: #68b0ab;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.birthday-cake {
position: relative;
top:20px;
}
Style the cake holder and the shadow:
.holder {
position:absolute;
width:350px;
height:20px;
border-radius:100px;
background-color: #212F3C;
left:-140px;
top:10px;
}
.holder:before {
content:"";
position:absolute;
width:100px;
height:150px;
background-color: #CACFD2;
left:130px;
top:20px;
}
.holder:after {
content:"";
position:absolute;
background-color:#68b0ab;
width: 100px;
height:135px;
border-radius:30px 30px 0 0;
left:65px;
top:20px;
box-shadow: 125px 0 #68b0ab;
}
.shadow {
position:absolute;
width:350px;
height:20px;
border-radius:50%;
top:170px;
left:-135px;
background-color: rgba(0,0,0,0.095);
z-index:1;
}
.shadow:before {
content:"";
position: absolute;
background-color: #CACFD2;
width:150px;
height:20px;
border-radius:20px;
top:-10px;
left:96px;
}

Style the cake:
.cake {
position:absolute;
overflow:hidden;
width:275px;
height:140px;
background-color: #FAD7A0;
top:-130px;
left:-101px;
border-radius:30px 30px 0 0;
}
.cake:before {
content:"";
background-color: #935116;
width:275px;
height:15px;
position:absolute;
top:75px;
box-shadow: 0 30px #935116;
}
.cake:after {
content:"";
position: absolute;
background-color: #573612;
width:275px;
height:40px;
box-shadow:inset 0 10px rgba(0,0,0,0.07);
}
.chocolate {
position:absolute;
background-color: #573612;
width:25px;
height:45px;
top:25px;
left:0;
z-index:2;
border-radius:50px;
box-shadow: 25px 2px #FAD7A0, 50px -10px #573612, 75px -5px #FAD7A0, 100px 3px #573612, 125px 0 #FAD7A0, 150px -5px #573612, 175px 3px #FAD7A0, 200px -5px #573612, 225px -10px #FAD7A0, 250px 4px #573612;
}

Style the candle and the flame:
.candle {
position:absolute;
width: 15px;
height:70px;
background-color: white;
top:-200px;
left:30px;
box-shadow:inset 0 -10px 0 #E74C3C;
}
.candle:before {
position:absolute;
width:15px;
height:15px;
background-color:#E74C3C;
content:"";
top:10px;
box-shadow: 0 25px #E74C3C;
}
.candle:after {
content:"";
width:2px;
height:15px;
content:"";
position:absolute;
background-color:black;
top:-15px;
left:6px;
}
.flame {
position:absolute;
background-color: #F4D03F;
opacity:0.9;
box-shadow:inset 0 -5px 5px #D35400, 5px -5px 20px #FBFFA3;
width:20px;
height:30px;
top:-240px;
border-radius:50%;
left:26.5px;
animation: flame 0.5s infinite;
}

Step 3.
Add CSS Animation
Light a candle:
@keyframes flame {
from, to { transform: scale(1, 1); }
25% { transform: scale(0.9, 1.1); }
50% { transform: scale(1.1, 0.9); }
75% { transform: scale(0.95, 1.05); }
}
Watch also the video tutorial:
Enjoy coding!
Read also: