am-depth/lib/depth.css

Assign depths based on Google's Material Design

/** depth util */
/*
 * different depths
 */

[data-am-depth] {
  position: relative;
  z-index: 1; /* to make sure the shadow shows */
}

[data-am-depth]:before,
[data-am-depth]:after {
  content: "";
  position: absolute;
  z-index: -1; /* to make sure the shadow layer isn't on top of the content inside of it */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

[data-am-depth='0']:before {
  box-shadow: none;
}
[data-am-depth='0']:after {
  box-shadow: none;
}

[data-am-depth='1']:before {
  box-shadow: rgba(0, 0, 0, 0.16) 0 2px 10px 0;
}
[data-am-depth='1']:after {
  box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0;
}

[data-am-depth='2']:before {
  box-shadow: rgba(0, 0, 0, 0.19) 0 6px 20px 0;
}
[data-am-depth='2']:after {
  box-shadow: rgba(0, 0, 0, 0.2) 0 8px 17px 0;
}

[data-am-depth='3']:before {
  box-shadow: rgba(0, 0, 0, 0.19) 0 17px 50px 0;
}
[data-am-depth='3']:after {
  box-shadow: rgba(0, 0, 0, 0.24) 0 12px 15px 0;
}

[data-am-depth='4']:before {
  box-shadow: rgba(0, 0, 0, 0.21) 0 25px 55px 0;
}
[data-am-depth='4']:after {
  box-shadow: rgba(0, 0, 0, 0.22) 0 16px 28px 0;
}

[data-am-depth='5']:before {
  box-shadow: rgba(0, 0, 0, 0.22) 0 40px 77px 0;
}
[data-am-depth='5']:after {
  box-shadow: rgba(0, 0, 0, 0.2) 0 27px 24px 0;
}