<div class="site-container">
  <div class="neumorphic-shape neumorphic-square"></div>
  <div class="neumorphic-shape neumorphic-square--smooth"></div>
  <div class="neumorphic-shape neumorphic-circle"></div>  
</div>

body {
  background: #ccc;
  margin: 0;
}

.site-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.neumorphic-shape {
  height: 150px;
  width: 150px;
  background: #ccc;
  border-radius: 20px;
  margin: 20px;
}

.neumorphic-square {
  box-shadow: -5px -5px 9px rgba(255, 255, 255, 0.45),
    5px 5px 9px rgba(94, 104, 121, 0.3);
}
.neumorphic-square--smooth {
  box-shadow: inset -5px -5px 9px rgba(255, 255, 255, 0.45),
    inset 5px 5px 9px rgba(94, 104, 121, 0.3);
}
.neumorphic-circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: -5px -5px 9px rgba(255, 255, 255, 0.45),
    5px 5px 9px rgba(94, 104, 121, 0.3);
}
.neumorphic-circle::after {
  content: "";
  position: absolute;
  height: 80%;
  width: 80%;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: inset -5px -5px 9px rgba(255, 255, 255, 0.45),
    inset 5px 5px 9px rgba(94, 104, 121, 0.3);
}