<body> <div class="emoji__box"> <div class="emoji"> <div class="eyes__box"> <div class="eye"></div> <div class="eye"></div> </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%); } .eyes__box{ position: relative; bottom: 15%; margin: 0 auto; width: 78.5%; height: 32.4%; display: flex; justify-content: space-between; } .eye{ width: 45%; height: 100%; border-radius: 50%; background-color: #fff; box-shadow: inset 0 0 10px 1px #00000096, 0 3px 13px 0px #f18a25; overflow: hidden; } .eye::before, .eye::after{ content: ''; display: block; width: 38%; height: 38%; border-radius: 50%; background-color: #000; margin: 0 auto; } .eye::after{ width: 16%; height: 16%; background-color: #8d8d8d; margin: -40% auto; } .mouth{ position: relative; margin: -3% auto; width: 38%; height: 5%; border-radius: 10px; background-color: #90521E; box-shadow: inset 0 0 8px 2px #5f2805; }