<div class="inset-1"></div>
<div class="inset-1 circle"></div>
<hr />
<div class="inset-2"></div>
<div class="inset-2 circle"></div>
<hr />
<div class="inset-3"></div>
<div class="inset-3 circle"></div>
<hr />
<div class="inset-3 border"></div>
<div class="inset-3 border circle"></div>

body {
  background-color: #e6e3df;
}

div {
  margin: 50px;
  height: 100px;
  width: 100px;
  display: inline-block;
}
.circle {border-radius: 50%;}
.border {border: 1px solid #e6e3df;}

.inset-1 {
  -moz-box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
  -webkit-box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
  box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}
.inset-2 {
  background-color: #cfc7c1;
  -moz-box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
  -webkit-box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
  box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}

.inset-3 {
  background-image:
    radial-gradient(
      circle at bottom right,
      #dfdbd6,
      #cfc7c1 90%
    );
  -moz-box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
  -webkit-box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
  box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1);
}