Pure CSS 😷!!!

index.html

<div class="emoji">
<div class="left-eye"></div>
   <div class="right-eye"></div>
   <div class="mouth"></div>
  <div class="mask">
  <div class="front"></div>
    <div class="straps-top"></div>
     <div class="straps-bottom"></div>
  </div>
   
</div>
<p>Stay healthy, stay safe!</p>

pure-css.markdown

Pure CSS 😷!!!

License.

style.css

@import "https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap";
:root {
  --shine:white;
  --primary-color: orange;
  --secondary-color:rgba(100, 48, 10, 1);
  --accent-color:rgba(100, 48, 10, 0.5);
}
*::before,
*::after{
  content:"";
  position: absolute;
}

body {
 background:linear-gradient(90deg,cyan, white, cyan)no-repeat white;
 filter:contrast(120%)saturate(120%);
}

.emoji {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle at 50% 20%, var(--shine) , var(--primary-color) 50%, var(--secondary-color) 95%);
  border-radius: 50%;
  position: relative;
  filter: drop-shadow(0 0 2px black)drop-shadow(0 0 2px var(--secondary-color));
  margin:50px auto;
  overflow:hidden;
}

.emoji::before {
  z-index: 2;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 0px, var(--shine), var(--primary-color), transparent 80%);
  border-radius: 50%;
  filter: blur(3px);
  top:2%;
  box-shadow:inset 0 -15px 30px 3px var(--secondary-color); 
}
.left-eye{
  position: absolute;
  z-index:3;
  width:60px;
  height: 15px;
  background: var(--accent-color);
  top:80px;
  left:40px;
  border-radius:50% 50% 0 0;
  transform:rotateZ(-15deg);
  box-shadow:inset 0 0 8px 2px var(--secondary-color), inset 0 0 2px 1px black;
}
.right-eye{
  position: absolute;
  z-index:3;
  width:60px;
  height: 15px;
  background: var(--accent-color);
  top:80px;
  right:40px;
  border-radius:50% 50% 0 0;
  transform:rotateZ(15deg);
  box-shadow:inset 0 0 8px 2px var(--secondary-color), inset 0 0 2px 1px black;
}
.mask{
  position: absolute;
  z-index:4;
  width:120px;
  height: 80px;

}
.front.mask{
  position: absolute;
  z-index:4;
  width:120px;
  height: 80px;
  background: white;
  bottom:50px;
  left:50%;
  margin:auto -60px;
  border-radius:5px;
  box-shadow:0 2px 6px 0 rgba(0,0,0, 0.5);

}
.mask{
  position: absolute;
  z-index:4;
  width:130px;
  height: 90px;
  background: white;
  bottom:50px;
  left:50%;
  margin:auto -65px;
  border-radius:5px;
  filter:
  drop-shadow(0 1px 1px rgba(0,0,0,0.3))
  drop-shadow(0 1px 2px var(--accent-color));
}

.straps-top::before{
position:absolute;
z-index:5;
width:100px;
height: 15px;
background: white;
right:95%;

transform:rotateZ(20deg);
}
.straps-top::after{
position:absolute;
z-index:5;
width:100px;
height: 15px;
background: white;
left:95%;

transform:rotateZ(-20deg);
}
.straps-bottom::before{
position:absolute;
z-index:5;
width:100px;
height: 15px;
background: white;
right:95%;
bottom:15px;
}
.straps-bottom::after{
position:absolute;
z-index:5;
width:100px;
height: 15px;
background: white;
left:95%;
bottom:15px;
}
p{
  text-align:center;
  font-family: 'Permanent Marker', cursive;
  font-size:2.5em;
  font-weight:900;
}