<div class="face"></div>
body {
  height: 95vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at 48% 33%, #fca7fa 10px, #a766d4 10px 13px, transparent 13px ), radial-gradient(circle at 52% 32%, #ffc9fe 17px, #a766d4 17px 20px, transparent 10px), radial-gradient(circle at 44% 33%, #ff87fc 17px, #a766d4 17px 20px, transparent 10px), radial-gradient(circle at 45% 16%, transparent 17px, #d699ff);
}

.face {
  position: absolute;
  width: 213px;
  height: 190px;
  background-color: white;
  background-image: 
    radial-gradient(ellipse at 50% 60%, #333 12px, transparent 12px), 
    radial-gradient(circle at 50% 79%, #fff 18px, transparent 18px), 
    radial-gradient(circle at 50% 80%, #333 18px, transparent 18px),
    radial-gradient(ellipse at 83% 70%, #ff61da 9px, transparent 20px),
    radial-gradient(ellipse at 17% 70%, #ff61da 9px, transparent 20px);
  border: 5px solid #333;
  border-bottom-width: 10px;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border-bottom-left-radius: 110px 90px;
  border-bottom-right-radius: 110px 90px;
}

.face::before {
  content: "";
  position: absolute;
  display: block;
  width: 75px;
  height: 60px;
  left: 29px;
  top: 55px;
  background-color: #333;
  background-image: 
    radial-gradient(circle at 42px 34px, #fff 3.5px, transparent 3.5px), 
    radial-gradient(circle at 38px 33px, #333 7px, transparent 7px), 
    radial-gradient(circle at 35px 33px, #fff 10px, transparent 12px);
  border-radius: 50% 50% 45% 42%;
  transform: rotate(-45deg);
  box-shadow: 10px -73px 0 -4px #333;
}

.face::after {
  content: "";
  position: absolute;
  display: block;
  width: 75px;
  height: 60px;
  left: 111px;
  top: 55px;
  background-color: #333;
  background-image: radial-gradient(circle at 33px 30px, #fff 3.5px, transparent 3.5px), radial-gradient(circle at 32px 34px, #333 7px, transparent 7px), radial-gradient(circle at 35px 33px, #fff 10px, transparent 12px);
  border-radius: 50% 50% 45% 42%;
  transform: rotate(45deg);
  box-shadow: -10px -73px 0 -4px #333;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.