CSS Ice cream

Demo:

What do you need to do?

To create the CSS Ice cream follow the steps below and watch the video tutorial:

1. Add HTML
2. Add CSS

Step1.

Add HTML

<div class="ice-cream">
  <div class="stick"></div>
  <div class="chocolate"></div>
</div>

Step2.

Add CSS

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

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

.ice-cream {
  position: relative;
  top:50px;
}

Style the ice cream:

.stick {
  position: relative;
  width:40px;
  height: 140px;
  border-radius:20px;
  background-color: #d4a276;
}

.stick:before {
  content:"";
  position: absolute;
  width:150px;
  height:200px;
  background-color: #fffcf2;
  border-radius:100px 100px 10px 10px;
  top:-130px;
  left:-55px;
}

.stick:after {
  position: absolute;
  content:"";
  width:40px;
  height: 20px;
  background-color: rgba(0,0,0,0.2);
  top:70px;
}

.chocolate {
  position: absolute;
  width: 161px;
  height: 140px;
  background-color: #583101;
  border-radius:100% 100% 0 0;
  top:-135px;
  left:-60.5px;
}

.chocolate:before {
  content:"";
  position: absolute;
  width: 23px;
  background-color: #583101;
  height:60px;
  border-radius:20px;
  top:120px;
  box-shadow: 23px 5px #fffcf2, 46px -10px #583101, 69px -5px #fffcf2, 92px -5px #583101, 115px 5px #fffcf2, 138px 5px #583101;
}

.chocolate:after {
  content:"";
  position: absolute;
  border-right: 5px solid rgba(255,255,255,0.5);
  border-top: 5px solid rgba(255,255,255,0.5);
  width:60px;
  height: 60px;
  border-top-right-radius: 100%;
  top:10px;
  left:85px;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Coffee Express Animation

Simple CSS Birthday Cake

CSS Doughnut