#doughnut Archives - 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!

Read also:

CSS Coffee Express Animation

CSS Ice cream

CSS Coffee Cup

Let’s have some fun with doughnuts! Today, in this tutorial step by step you’ll learn how to make a doughnut in Adobe Illustrator (CS6) using basic shapes and filters (watch also the video tutorial).

Step 1.

Create a new document, and by using Eclipse Tool draw a circle, and draw another smaller circle inside. Duplicate both paths.

Step 2.

Remove stroke from the bigger circles, make the front circle smaller, and set the light brown colour to the front circle and darker brown to the back circle.

We’ll do now similar thing to the small circles. Remove stroke from the smaller circles, make the front circle smaller, and set the white colour to the front circle and pink to the back one.