<div class="container">
  <div class="d-flex">
<div class="neumo00 d-flex">
  <h1>1</h1>
</div>
<div class="neumo01 d-flex">
  <h1>2</h1>
</div>
<div class="neumo02 d-flex">
  <h1>3</h1>
</div>
<div class="neumo03 d-flex">
  <h1>4</h1>
</div>
</div>
body{
  background:#d0dee7;s
}

.container{
  margin:3rem 5rem;
}
.d-flex{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}

h1{
  font-size:1.5rem;
  color:#a0a0a0;
}

.neumo00{
  width:100px;
  height:100px;
  margin:1rem;
border-radius: 15px;
background: #d0dee7;
box-shadow:  20px 20px 60px #9ea9b0,
             -20px -20px 60px #ffffff;
}

.neumo01{
    width:100px;
  height:100px;
  margin:1rem;
border-radius: 15px;
background: linear-gradient(145deg, #bbc8d0, #dfeef7);
box-shadow:  20px 20px 31px #adb8c0,
             -20px -20px 31px #f3ffff;
}

.neumo02{
    width:100px;
  height:100px;
  margin:1rem;
border-radius: 15px;
background: linear-gradient(145deg, #dfeef7, #bbc8d0);
box-shadow:  20px 20px 31px #adb8c0,
             -20px -20px 31px #f3ffff;
}



.neumo03{
   width:100px;
  height:100px;
  margin:1rem;
border-radius: 15px;
background: #d0dee7;
box-shadow: inset 20px 20px 31px #adb8c0,
            inset -20px -20px 31px #f3ffff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.