My cat has a birthday today, celebrating this day I created the Bday cake in CSS. Follow the steps below and create own Birthday cake and the balloons!

To create a birthday animation follow the steps below.
To see the live output click here.
What do you need to do?
- Add HTML
- Add CSS
- Add CSS Animation
Step 1.
Add HTML
Draw your cake:
<div class="container">
<div class="bdaycake">
<div class="holder"></div>
<div class="holder2"></div>
<div class="holder1"></div>
<div class="shadow"></div>
<div class="cake">
<div class="top"></div>
<div class="chocolate"></div>
<div class="chocolate1"></div>
<div class="chocolate2"></div>
</div>
<div class="candle"></div>
<div class="candle1"></div>
<div class="flame"></div>
</div>
</div>
Step 2.
Add CSS
Set the background colour and the position of the container:
body {
background: #1D8348;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
position:relative;
}
Set up the cake holder:
.holder {
position:absolute;
width:350px;
height:20px;
border-radius:100px;
background-color: #212F3C;
left:-140px;
z-index:11;
top:10px;
}
.holder2 {
position:absolute;
width:100px;
height:130px;
background-color: #CACFD2;
left:-22px;
top:20px;
}
.holder:before {
content:"";
position:absolute;
width:200px;
height: 20px;
border-radius:100px;
background-color: #CACFD2;
top:139px;
left:77px;
}
.shadow {
position:absolute;
width:400px;
height:40px;
border-radius:50%;
top:150px;
left:-155px;
background-color: rgba(0,0,0,0.095);
z-index:-1;
}
.holder1 {
position:absolute;
background-color:#1D8348;
width: 100px;
height:119px;
border-radius:0 30px 0 0;
left:-77px;
top:30px;
z-index:10;
}
.holder1:after {
position:absolute;
content:"";
background-color:#1D8348;
width: 100px;
height:120px;
border-radius:30px 0 0 0;
left:130px;
}

Style the cake:
.cake {
position:absolute;
overflow:hidden;
width:280px;
height:140px;
background-color: #FAD7A0;
top:-130px;
left:-102px;
border-radius:30px 30px 0 0;
}
.cake:after {
content:"";
background-color: #935116;
width:280px;
height:15px;
position:absolute;
top:105px;
}
.cake:before {
content:"";
background-color: #935116;
width:280px;
height:15px;
position:absolute;
top:75px;
}
.top {
position:absolute;
background-color: #573612 ;
width:290px;
height:40px;
box-shadow:inset -10px 10px 0 rgba(0,0,0,0.07);
}
.top:after {
content:"";
position:absolute;
background-color: #573612;
width:25px;
height:55px;
top:15px;
border-radius:50px;
}
.top:before {
content:"";
position:absolute;
background-color: #FAD7A0;
width:25px;
height:35px;
top:25px;
left:25px;
border-radius:50px;
}
.chocolate {
position:absolute;
background-color: #573612;
width:25px;
height:45px;
top:15px;
left:50px;
border-radius:50px;
}
.chocolate:after {
content:"";
position:absolute;
background-color: #FAD7A0;
width:25px;
height:35px;
left:25px;
border-radius:50px;
}
.chocolate:before {
position:absolute;
background-color: #573612;
width:25px;
height:45px;
top:10px;
left:50px;
border-radius:50px;
content:"";
}
.chocolate1 {
position:absolute;
background-color: #FAD7A0;
width:25px;
height:35px;
left:125px;
top:25px;
border-radius:50px;
}
.chocolate1:after {
position:absolute;
background-color: #573612;
width:25px;
height:45px;
top:-5px;
left:25px;
border-radius:50px;
content:"";
}
.chocolate1:before {
position:absolute;
content:"";
background-color: #FAD7A0;
width:25px;
height:35px;
left:50px;
top:5px;
border-radius:50px;
}
.chocolate2 {
position:absolute;
background-color: #573612;
width:25px;
height:35px;
left:200px;
top:17px;
border-radius:50px;
}
.chocolate2:after {
position:absolute;
content:"";
background-color: #FAD7A0;
border-radius:50px;
width:25px;
height:35px;
left:25px;
}
.chocolate2:before {
content:"";
position:absolute;
background-color: #573612;
width:35px;
height:35px;
left:50px;
top:8px;
border-radius:50px;
}

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:after {
position:absolute;
width:15px;
height:15px;
background-color:#E74C3C;
content:"";
top:35px;
}
.candle:before {
position:absolute;
width:15px;
height:15px;
background-color:#E74C3C;
content:"";
top:10px;
}
.candle1 {
width:2px;
height:15px;
position:absolute;
background-color:black;
top:-215px;
left:36px;
}
.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:25.5px;
animation: flame 0.5s infinite;
}
Note: To the candle, I added flame animation.

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); }
}
To see the live output visit: lenastanley.com.
Watch also the video tutorial:
Enjoy coding!