Pure CSS 😭

index.html

<div class="head">
   <div class="left-eye"></div>
   <div class="right-eye"></div>
   <div class="tears-right"></div>
   <div class="tears-left"></div>
   <div class="mouth"></div>
</div>

pure-css.markdown

Pure CSS 😭

License.

style.css

:root {
  --dark-brown: rgba(100, 48, 10, 1);
  --dark-brown-fade: rgba(100, 48, 10, 0.5);
  --dark-purple: rgba(39, 35, 73, 1);
  --white-fade: rgba(255, 255, 255, 0.5);
}
body{
   width:250px;
   margin:100px auto;
   background:linear-gradient(navy 30%, gold);
   background-repeat:no-repeat;
}

.head{
   width:250px;
   height:250px;
   background:radial-gradient(circle at 50% 30%, white, orange 50%, var(--dark-brown) 95%);
border-radius:50%;
   position:relative;
   filter:drop-shadow(0 0 3px black)drop-shadow(0 0 3px var(--dark-brown));
  overflow:hidden;
}
.head::before{
   content:"";
   z-index:2;
   width:100%;
   height:100%;
   background:radial-gradient(circle at 50% 0, white, orange, transparent 80%);
   border-radius:50%;
   position:absolute;
   top:1%;
   left:0;
   filter:blur(5px);
}
.left-eye{
   position:absolute;
   z-index:3;
   width:60px;
   height:25px;
   background:linear-gradient(360deg,transparent 15%, var(--dark-brown-fade)45%, var(--dark-brown)80%);
   border-radius:50%;
   top:105px;
   left:40px;
   filter:drop-shadow(0 0 1px var(--dark-brown));
   box-shadow:inset 0 10px 2px var(--dark-brown);
}
.left-eye::before{
   content:"";
   position:absolute;
   z-index:3;
   width:60px;
   height:25px;
   background:linear-gradient(360deg,transparent 45%, var(--dark-brown-fade)55%, var(--dark-brown)80%);
   border-radius:50%;
   bottom:35px;
   right:15px;
   filter:drop-shadow(0 0 1px var(--dark-brown));
   box-shadow:inset 0 10px 2px var(--dark-brown);
   transform:rotatez(-30deg);
}
.right-eye{
   position:absolute;
   z-index:3;
   width:60px;
   height:25px;
   background:linear-gradient(360deg,transparent 15%, var(--dark-brown-fade)45%, var(--dark-brown)80%);
   border-radius:50%;
   top:105px;
   right:40px;
   filter:drop-shadow(0 0 1px var(--dark-brown));
   box-shadow:inset 0 10px 2px var(--dark-brown);
}
.right-eye::before{
   content:"";
   position:absolute;
   z-index:3;
   width:60px;
   height:25px;
   background:linear-gradient(360deg,transparent 45%, var(--dark-brown-fade)55%, var(--dark-brown)80%);
   border-radius:50%;
   bottom:35px;
   left:15px;
   filter:drop-shadow(0 0 1px var(--dark-brown));
   box-shadow:inset 0 10px 2px var(--dark-brown);
   transform:rotatez(30deg);
}
.tears-left{
   position:absolute;
   width:40px;
   height:130px;
   background:linear-gradient(90deg, cyan 10%, white, cyan 90%);
   z-index:2;
   top:116px;
   left:45px;
   border:1px solid navy;
   box-shadow:inset 0 0 20px 5px navy;
}
.tears-right{
   position:absolute;
   width:40px;
   height:130px;
   background:linear-gradient(90deg, cyan 10%, white, cyan 90%);
   z-index:2;
   top:116px;
   right:45px;
   border:1px solid navy;
   box-shadow:inset 0 0 20px 5px navy;
}
.mouth{
   z-index:3;
   position:absolute;
   width:60px;
   height:70px;
   top:140px;
   left:95px;
   background:linear-gradient(white 30%, var(--dark-brown)30%,var(--dark-brown-fade)35%, var(--dark-brown));
   border-radius:50%;
   box-shadow:inset 0 0 10px 4px var(--dark-brown);
}

.tears-left::before,
.tears-right::before{
   content:"";
   position:absolute;
   width:100%;
   height:100%;
   background:linear-gradient(transparent 5%, var(--white-fade)25%, transparent 10%);
   filter:blur(3px);
   animation:cry 300ms linear infinite;
}
@keyframes cry{
   0%{
      background-position:0 -50px;
      filter:drop-shadow(0 0 1px white);
   }
   100%{
      background-position:0 50px;
      filter:drop-shadow(0 0 35px white);
   }
}