
Demo:
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: