Pure CSS 😈

index.html

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

pure-css.markdown

Pure CSS 😈

License.

style.css

:root {
  --dark-purple: rgb(70, 0, 150);
  --light-purple: rgb(202, 174, 229);
  --midnight-purple: rgb(39, 35, 73);
  --faded-black: rgba(0, 0, 0, .3);
}
body{
   width:250px;
   margin:100px auto;
   background: linear-gradient(var(--midnight-purple) 40%, black 70%);
   background-repeat:no-repeat;
}


.head{
   position:relative;
   width:250px;
   height:250px;
   background: radial-gradient(var(--light-purple) 10%, var(--dark-purple), transparent 90%);
   border-radius:50%;
   box-shadow: 0 -1px 1px 4px black;
}

.head::before{
  content:"";
  z-index:2;
   position:absolute;
   width:100%;
   height:100%;
   background: radial-gradient(circle at 50% 0, var(--light-purple) 5%, var(--dark-purple), transparent);
   border-radius:50%;
   top:0;
   left:0;
   filter:blur(5px);
   border:1px solid black;
}

.left-eye{
   z-index:3;
   position:absolute;
   width:30px;
   height:40px;
   background: linear-gradient(black 50%,transparent 90% );
   border-radius:50%;
   top:105px;
   left:75px;
   box-shadow: inset 0 5px 10px 5px black;
   animation:blink 4s linear infinite;
}

.left-eye::before{
   content:"";
   z-index:3;
   position:absolute;
   width:47px;
   height:15px;
   background:linear-gradient(black 50%, transparent 70%);
   border-radius:50%;
   top:-10px;
   left:-13px;
   transform:rotatez(25deg);
}

.right-eye{
   z-index:3;
   position:absolute;
   width:30px;
   height:40px;
   background: linear-gradient(black 50%,transparent 90% );
   border-radius:50%;
   top:105px;
   right:75px;
   box-shadow: inset 0 5px 10px 5px black;
   animation:blink 4s linear infinite;
}

.right-eye::before{
   content:"";
   z-index:3;
   position:absolute;
   width:47px;
   height:15px;
   background:linear-gradient(black 50%, transparent 70%);
   border-radius:50%;
   top:-10px;
   right:-13px;
   transform:rotatez(-25deg);
}

.mouth{
   z-index:3;
   position:absolute;
   width:120px;
   height:100px;
   background:radial-gradient(circle at 50% 0, transparent 70%, black 70%, var(--faded-black) 80%, black 90%);
   border-radius:50%;
   top:100px;
   left:65px;
}

.left-horn{
   position:absolute;
   width:90px;
   height:120px;
   background: radial-gradient(circle at 70% 0, transparent 50%, var(--light-purple) 50%, var(--dark-purple) 70%, black);
   border-radius:50%;
   top:-40px;
   left:-20px;
}

.right-horn{
   position:absolute;
   width:90px;
   height:120px;
   background: radial-gradient(circle at 30% 0, transparent 50%, var(--light-purple) 50%, var(--dark-purple) 70%, black);
   border-radius:50%;
   top:-40px;
   right:-20px;
}

@keyframes blink{
   0%{
      transform:rotatex(90deg);
   }
   7%{
      transform:rotatex(0);
   }
   
}