Bday Cake – CSS Animation

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.

What do you need to do?

1. Add HTML
2. Add CSS
3. 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;
  content:"";
  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.

Enjoy coding!