<body> <div class="emoji__box"> <div class="emoji"> <div class="eye"></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%); } .eye, .eye::after{ position: relative; width: 11%; height: 13%; top: -45px; 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; }