CSS Doughnut - Lena Design

Demo:

*to see the CSS Doughnut on the website click here.

What do you need to do?

To create the CSS Doughnut follow the steps below:

Add HTML
Add CSS

Step 1.

Add HTML

<div class="doughnut">
  <div class="cake"></div>
  <div class="sprinkles"></div>
</div>

Step 2.

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: #2dc7ff;
}

.doughnut {
  position: relative;
}

Style the doughnut:

.doughnut:before {
  content:"";
  position: absolute;
  width:300px;
  height:50px;
  border-radius:50%;
  background-color: rgba(0,0,0,0.2);
  top:260px;
  left:120px;
  transform: skew(-55deg);
}

.doughnut:after {
  content:"";
  position: absolute;
  width:70px;
  height:10px;
  border-radius:50%;
  background-color: #2dc7ff;
  top:275px;
  left:250px;
  transform: skew(-55deg);
}

.cake {
  position: relative;
  width:300px;
  height: 300px;
  background-color: #eaba6b;
  border-radius:50%;
  box-shadow: 5px 5px #a68349;
}

.cake:before {
  position: absolute;
  content:"";
  background-color: #ea526f;
  width:100px;
  height:100px;
  border-radius: 50%;
  top:40px;
  left:40px;
  box-shadow:60px -20px #ea526f, 120px 0px #ea526f, 140px 40px #ea526f, 130px 100px #ea526f, 100px 140px #ea526f, 50px 150px #ea526f, 0px 120px #ea526f, -30px 60px #ea526f;
}

.cake:after {
  content:"";
  position: absolute;
  width: 100px;
  height:100px;
  border-radius:50%;
  background-color: #2dc7ff;
  top:100px;
  left:100px;
  box-shadow: inset 10px 5px #a68349;
}

Add some sprinkles:

.sprinkles {
  position: absolute;
  width: 5px;
  height: 20px;
  background-color: #ffe45e;
  border-radius:10px;
  top:60px;
  left:100px;
  transform: rotate(30deg);
  box-shadow: 100px 130px #2dc7ff, -10px 90px #7b1e7a, 150px 20px #d80032;
}

.sprinkles:before {
  content:"";
  position: absolute;
  width: 5px;
  height: 20px;
  background-color: #2dc7ff;
  border-radius:10px;
  top:60px;
  left:0px;
  transform: rotate(-30deg);
  box-shadow: 100px 130px #f49f0a, -10px 90px #d80032, 150px 20px #c5d86d;
}

.sprinkles:after {
  content:"";
  position: absolute;
  width: 5px;
  height: 20px;
  background-color: #2dc7ff;
  border-radius:10px;
  top:-50px;
  left:110px;
  transform: rotate(45deg);
  box-shadow: 30px 30px #ffe45e, 120px 90px #ef233c;
}

Enjoy coding!

Share this: