
Demo:
To create the CSS Scarecrow follow the steps below:
- Add HTML
- Add CSS
Step1.
Add HTML
<div id="scare-crow">
<div class="circle">
<div class="scarecrow">
<div class="head"></div>
<div class="hat"></div>
<div class="eyes"></div>
<div class="smile"></div>
<div class="jumper"></div>
<div class="patch"></div>
<div class="stick"></div>
<div class="straw"></div>
</div>
</div>
</div>
Step2.
Add CSS
Set the colour and the position of the background, and the elements:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #654236;
}
#scare-crow {
position: relative;
}
.circle {
position: relative;
overflow: hidden;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #db995a;
box-shadow: 10px 5px 1px rgba(0,0,0,0.07);
}
.circle:before {
content:"";
background-color: #2a3c24;
width: 400px;
height:200px;
border-radius:50%;
top:250px;
position:absolute;
left:0;
}
.circle:after {
content:"";
position: absolute;
background-color: #f4ae4a;
width: 120px;
height: 30px;
border-radius: 100px;
left: 270px;
top: 80px;
box-shadow: -50px 30px #db995a, 20px 30px #f4ae4a, -60px 60px #f4ae4a, 30px 60px #f4ae4a, -80px 90px #db995a, 80px 90px #db995a, 10px 90px #f4ae4a, -2px 120px #f4ae4a,-280px 30px #f4ae4a, -245px 60px #db995a, -280px 60px #f4ae4a,-300px 90px #f4ae4a;
}

Style the Scarecrow:
.scarecrow {
position: absolute;
}
.head {
position: absolute;
background-color: #ff6d00;
width: 60px;
height:90px;
left:147px;
top:100px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
z-index:5;
}
.head:before {
content:"";
position: absolute;
background-color: #ff6d00;
width: 60px;
height:90px;
left:50px;
top:0;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
box-shadow: inset -10px 5px 0 rgba(0,0,0,0.07);
}
.head:after {
content:"";
position: absolute;
width: 60px;
height:90px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background-color: #ff8500;
left:25px;
}
.hat {
width: 130px;
height: 60px;
border-radius:50%;
position: absolute;
background-color: #ad5015;
top:85px;
left: 135px;
box-shadow: inset -20px -5px 0 rgba(0,0,0,0.07);
z-index:10;
}
.hat:before {
content:"";
position: absolute;
border-bottom: 50px solid #ad5015;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 50px;
top:-30px;
left:25px;
}
.hat:after {
content:"";
position: absolute;
background-color: #ad5015;
border-radius:50%;
width:50px;
height:15px;
top:-38px;
left:40px;
box-shadow: inset -5px -5px 0 rgba(0,0,0,0.07);
}
.eyes {
position: absolute;
width: 0;
height: 0;
border-left: 17px solid transparent;
border-right: 10px solid transparent;
border-top: 12px solid black;
left:170px;
top:150px;
z-index:7;
}
.eyes:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 17px solid transparent;
border-top: 12px solid black;
left:20px;
top:-12px;
}
.smile {
position: absolute;
background-color: black;
width: 35px;
height: 13px;
border-radius: 0 0 100px 100px;
left:185px;
top:170px;
z-index:7;
}
.smile:before {
content:"";
position: absolute;
background-color: #ff8500;
width: 7px;
height: 9px;
top:-5px;
left:7px;
}
.smile:after {
content:"";
position: absolute;
background-color: #ff8500;
width: 7px;
height: 9px;
left:18px;
top:8px;
}
.jumper {
position: absolute;
background-color: #4059ad;
width:250px;
height: 50px;
z-index:2;
top: 160px;
left:75px;
border-radius: 0 0 30px 30px;
}
.jumper:before {
content:"";
position: absolute;
background-color: #4059ad;
border-radius: 0 0 30px 0;
width: 150px;
height: 140px;
left:55px;
}
.jumper:after {
content:"";
position: absolute;
background-color: #4059ad;
width: 30px;
height:80px;
border-radius: 0 0 20px 0;
top:90px;
left:55px;
}
.stick {
z-index:1;
width: 15px;
height: 100px;
background-color: #57240f;
position: absolute;
top:300px;
left:195px;
box-shadow: inset 10px 5px 0 rgba(0,0,0,0.07);
}
.stick:before {
content:"";
position: absolute;
width: 300px;
box-shadow: inset 10px 5px 0 rgba(0,0,0,0.07);
background-color: #57240f;
height: 15px;
top:-140px;
left:-145px;
border-radius:10px;
}
.stick:after {
content:"";
position: absolute;
background-color: #deb841;
width:5px;
height:45px;
border-radius: 10px;
left: 20px;
top: 60px;
transform: rotate(20deg);
}
.straw {
position: absolute;
background-color: #deb841;
width:5px;
height: 45px;
top: 360px;
border-radius: 10px;
left: 200px;
z-index:1;
}
.straw:before {
content:"";
position: absolute;
background-color: #deb841;
width:5px;
height: 45px;
border-radius:10px;
left:-25px;
transform:rotate(-20deg);
}
.straw:after {
content:"";
position: absolute;
background-color: #deb841;
width:45px;
top:-190px;
height: 5px;
border-radius:10px;
left:-140px;
transform: rotate(-30deg);
}
.patch {
position: absolute;
width: 30px;
height: 40px;
background-color: #d7263d;
left: 230px;
top:230px;
z-index:2;
box-shadow: inset 10px 5px 0 rgba(0,0,0,0.07);
}
.patch:after {
content:"";
position: absolute;
background-color: black;
width:2px;
height: 15px;
left:5px;
top:-5px;
}
.patch:before {
content:"";
position: absolute;
background-color: black;
width:2px;
height: 8px;
left: 20px;
top:37px;
}

To see the live output of the code above go to lenastanley.com.
Enjoy coding!
Read also: