<body> <div class="emoji__box"> <div class="emoji"> <div class="eye"></div> <div class="mouth"></div> </div> </div> </body>
.emoji__box{ width: 420px; height: 420px; } .emoji{ position: absolute; width: 400px; height: 400px; border-radius: 50%; background: linear-gradient(to bottom, #F8A628 0%, #FDDC2C 100%); box-shadow: inset 0 0 15px 2px #F18A25, 0 7px 25px 0 rgb(0 0 0 / 50%); } .emoji::before{ content:''; position: relative; display: block; width: 340px; height: 175px; left: 7%; top: 5%; border-radius: 175px 175px 0 0; background: linear-gradient(to bottom, #ffffff9f 0%, #ffffff00 100%); } /*this is top of mouth*/ .emoji::after{ content: ''; display: block; margin: 0 auto; position: relative; width: 73%; top: -164px; height: 7%; background: transparent; border-radius: 50%; box-shadow: inset 0 -15px 0 -1px #fff; } .mouth{ position: relative; width: 73%; top: -3; height: 36.5%; margin: 0 auto; border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%; background: radial-gradient(ellipse at center, #C9732A 0%, #90521E 100%); box-shadow: inset 0 0 8px 2px #5f2805; overflow: hidden; } .mouth::after{ content: ''; display: block; position: relative; width: 100%; height: 42%; border-radius: 0% 0% 50% 50% / 0% 0% 38% 38% ; background: radial-gradient(circle, rgba(255,255,255,1) 50%, rgb(221 221 221) 100%); } .eye, .eye::after{ position: relative; width: 11%; height: 13%; top: -68px; left: 110px; border-radius: 50%; background: radial-gradient(ellipse at center, #C9732A 0%, #90521E 100%); box-shadow: inset 0 0 8px 2px #5f2805; } .eye::after{ content: ''; display: block; width: 100%; height: 100%; top: 0; left: 130px; }