Подскажите пожалуйста, как достигается, такой эффект?

.switch {
  display: block;
  position: fixed;
    width: 70px;
  height: 100px;
  margin-top: 170px;
  margin-left: 900px;
  
  border-radius: 70px;
  background: #6A5928,
  background: linear-gradient(#6A5928, #fdfdfd);
  border: 1px solid rgba(0,0,0,0.1);
  
  box-shadow: 
    0 12px 13px rgba(49,18,14,.6);
  
  cursor: pointer;
  
 
}
 
.switch:before {
    content: "";
  position: absolute;
  top: -10px; bottom: -10px;
  left: -5px; right: -5px;
  z-index: -1;
  
  background: #6A5928,
  border-radius: inherit;
  
  box-shadow:
    10px 1px 1px rgba(#aea391,4),
    10px 13px 13px rgba(170, 160, 140, 4),
    
    10px 10px 5px rgba(196,196,196, 5);
}
 
.switch:after {
    content: "";
  width: 60px;
  height: 70px;
  border-radius: 50%;
  z-index: -1;
  left: 18px;
  top: 10px;
  background: #6A5928;
 
  -webkit-filter: blur(5px);
}
#switch {
 
    clip: rect(0 0 0 0);
  visibility: hidden;
}
 
#switch:checked ~ .switch {
    background: #C4C4C4;
  box-shadow:
    
    10px 6px 5px rgba(196,196,196,.10),
    10px 10px 5px rgba(196,196,196,.10);
  border: 5px;
 
}
 
#switch:checked ~ .switch:after {
  display: none;
}