Simple CSS Birthday Cake

Demo:

*to see the animation on the website click here.

To create to CSS Birthday Cake animation follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="container">
  <div class="bdayCake">
    <div class="plate"></div>
    <div class="cream"></div>
    <div class="candle"></div>
    <div class="flame">
      <div class="one">+</div>
      <div class="two">+</div>
      <div class="three">+</div>
    </div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  background-color: #f0efeb;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

.container {
  position: relative;
}

.bdayCake {
  position: relative;
  left:-100px;
  top:100px;
}

Style the cake and the plate:

.plate {
  position: absolute;
  width: 242px;
  height:10px;
  border-radius:10px;
  background-color: #2a9d8f;
}

.plate:before {
  content:"";
  position: absolute;
  width:195px;
  height:90px;
  background-color: #9c6644;
  top:-90px;
  left:25px;  
}

.plate:after {
  content:"";
  position: absolute;
  width:195px;
  left:25px;
  height:10px;
  background-color: #ffd166;
  top:-60px;
  box-shadow: 0px 25px #f4978e;
}

.cream {
  position: absolute;
  background-color: #f08080;
  width:195px;
  height:20px;
  left:25px;
  top:-110px;
  border-radius:20px 20px 0 0;
}

.cream:before {
  content:"";
  position: absolute;
  background-color: #f08080;
  width:15px;
  height:30px;
  top:10px;
  border-radius:20px;
  box-shadow: 15px 5px #9c6644, 30px -5px #f08080, 45px 0px #9c6644, 60px 4px #f08080, 75px 3px #9c6644, 90px -5px #f08080, 105px 5px #9c6644, 120px -5px #f08080, 135px 0px #9c6644, 150px 4px #f08080, 165px 0px #9c6644, 180px 3px #f08080;
}

.cream:after {
  position: absolute;
  content:"";
  background-color: rgba(0,0,0,0.1);
  width: 97.5px;
  height:110px;
  left:98px;
  border-radius: 0 20px 0 0;
}

Add the candle and the flame:

.candle {
  position: absolute;
  width: 10px;
  height:40px;
  background: repeating-linear-gradient(#fae0e4,
  #fae0e4 5px, #ff0a54 5px, #ff0a54 10px);
  box-shadow: inset -5px 0px rgba(0,0,0,0.1);
  top: -150px;
  left:118px;
}

.candle:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:2px;
  height:10px;
  top:-10px;
  left:4px;
}

.candle:after {
  content:"";
  position: absolute;
  width:20px;
  height: 20px;
  background-color:#fcca46;
  border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
  box-shadow: inset -3px 3px #fe7f2d;
  transform: rotate(-45deg);
  top:-28px;
  left:-5px;
  opacity:0.9;
  animation: scale .5s ease-out infinite;
}

.flame {
  position: absolute; 
}

.flame:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  height:10px;
  width:118px;
  border-radius:0 10px 10px 0;
  top:0;
  left:123px;
}

.one {
  position: absolute;
  color: #fcca46;
  font-size:20px;
  top:-160px;
  left: 100px;
  text-shadow: 33px -30px #fcca46;
  animation: flash .5s ease infinite alternate;
}

.two {
  position: absolute;
  color: #fcca46;
  font-size:15px;
  top:-180px;
  left: 100px;
  text-shadow: 35px 30px #fcca46;
  animation: flash .8s ease infinite alternate;
}
 
.three {
  position: absolute;
  color: #fcca46;
  font-size:10px;
  top:-195px;
  left: 110px;
  text-shadow: 30px 30px #fcca46;
  animation: flash .4s ease infinite alternate;
}

Step3.

Add CSS Animation

For the candle and the flame:

@keyframes scale {
  0% {transform: scaleY(1) rotate(-45deg); opacity:0.9;}
  50% {transform: scaleY(0.9) rotate(-45deg); opacity:0.8;}
  100% {transform: scaleY(1) rotate(-45deg); opacity: 0.9;}  
}

@keyframes flash {
	from { opacity: 1; }	
	to { opacity: 0; }
}

To see the CSS Birthday Cake on the website go to lenastanley.com.

Watch also the video tutorial: