Four Layer Shadow

by amindunited

HTML

<div class="application">
  <div class="container">
    <div class="card">
      <h1>
        Card Title
      </h1>
      
    </div>
  </div>
  <div class="container">
    <div class="card1">
      <h1>
        Card Title 1
      </h1>
      
    </div>
  </div>
  <div class="container">
    <div class="card2">
      <h1>
        Card Title 2
      </h1>
    </div>
  </div>
 <div class="container">
    <div class="card3">
      <h1>
        Card Title 3
      </h1>
    </div>
  </div>

 <div class="container">
    <div class="card4">
      <h1>
        Card Title 4
      </h1>
    </div>
  </div>

 <div class="container">
    <div class="card5">
      <h1>
        Card Title 5
      </h1>
    </div>
  </div>



</div>

CSS

html, body {
  padding: 0;
  margin: 0;
}

.application {
  background-color: rgba(127, 127, 127, .5);
  min-height: 100vh;
  padding-top: 32px;
  padding-bottom: 32px;
  scale: 200%;
}

.container {
  /* background-color: rgba(127, 127, 127, .5); */
  max-width: 75vw;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 16px;
}

.card {
  background-color: rgba(256, 256, 256, 1);
  padding: 32px 16px 16px 16px;
  border-radius: 2px;
  box-shadow: 
    64px 128px 64px 8px rgba(127, 127, 127, .2),
    32px 64px 32px 8px rgba(127, 127, 127, .4),
    16px 16px 32px 6px rgba(127, 127, 127, .6),
    8px 8px 32px 4px rgba(127, 127, 127, .8);
}

.card1 {
  background-color: rgba(256, 256, 256, 1);
  padding: 32px 16px 16px 16px;
  border-radius: 2px;
  box-shadow: 
    32px 64px 32px 4px rgba(127, 127, 127, .2),
    16px 32px 16px 4px rgba(127, 127, 127, .4),
    8px 8px 16px 4px rgba(127, 127, 127, .6),
    4px 4px 16px 4px rgba(127, 127, 127, .8);
}

.card2 {
  background-color: rgba(256, 256, 256, 1);
  padding: 32px 16px 16px 16px;
  border-radius: 2px;
  box-shadow: 
    16px 32px 16px 2px rgba(127, 127, 127, .2),
    8px 16px 8px 2px rgba(127, 127, 127, .4),
    4px 4px 8px 2px rgba(127, 127, 127, .6),
    2px 2px 8px 2px rgba(127, 127, 127, .8);
}


.card3 {
  background-color: rgba(256, 256, 256, 1);
  padding: 32px 16px 16px 16px;
  border-radius: 2px;
  box-shadow: 
    8px 16px 8px 1px rgba(127, 127, 127, .2),
    4px 8px 4px 1px rgba(127, 127, 127, .4),
    2px 2px 4px 1px rgba(127, 127, 127, .6),
    1px 1px 4px 1px rgba(127, 127, 127, .8);
}


.card4 {
  background-color: rgba(256, 256, 256, 1);
  padding: 32px 16px 16px 16px;
  border-radius: 2px;
  box-shadow: 
    4px 8px 8px 2px rgba(127, 127, 127, .2),
    2px 4px 6px 1px rgba(127, 127, 127, .4),
    1px 1px 2px 1px rgba(127, 127, 127, .6),
     0.5px 0.5px 0px 0px rgba(127, 127, 127, .8);
}


.card5 {
  background-color: rgba(256, 256, 256, 1);
  padding: 32px 16px 16px 16px;
  border-radius:...