suitcss-depth/lib/depth.css

Assign depths based on Google's Material Design

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

:root {
  --depth-color: #000000;
}

.u-depth {
  position: relative;
  z-index: 1;
  border-radius: inherit;
}

.u-depth:before, .u-depth:after {
  border-radius: inherit;
  z-index: -1;
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

.u-depth0:before, .u-depth0:after {
  transition: box-shadow 0.7s 0.01s cubic-bezier(0.19, 1, 0.22, 1);
}

.u-depth0:before {
  opacity: 0;
  box-shadow: 0 0 0 var(--depth-color), 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
}

.u-depth0:after {
  opacity: 0;
  box-shadow: 0 0 0 var(--depth-color), 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
}
.u-depth0:before, .u-depth0:after {
  transition: box-shadow 0.7s 0.01s cubic-bezier(0.19, 1, 0.22, 1);
}

.u-depth1:before, .u-depth1:after {
  transition: box-shadow 0.7s 0.01s cubic-bezier(0.19, 1, 0.22, 1);
}
.u-depth1:before {
  opacity: 0.12;
  box-shadow: 0 1px 10px var(--depth-color), 0 3px 15px transparent, 0 10px 40px transparent, 0 14px 50px transparent, 0 19px 70px transparent;
}
.u-depth1:after {
  opacity: 0.24;
  box-shadow: 0 1px 1px var(--depth-color), 0 3px 3px transparent, 0 6px 3px transparent, 0 10px 5px transparent, 0 15px 6px transparent;
}

.u-depth2:before, .u-depth2:after {
  transition: box-shadow 0.7s 0.01s cubic-bezier(0.19, 1, 0.22, 1);
}
.u-depth2:before {
  opacity: 0.16;
  box-shadow: 0 1px 10px transparent, 0 3px 15px var(--depth-color), 0 10px 40px transparent, 0 14px 50px transparent, 0 19px 70px transparent;
}
.u-depth2:after {
  opacity: 0.23;
  box-shadow: 0 1px 1px transparent, 0 3px 3px var(--depth-color), 0 6px 3px transparent, 0 10px 5px transparent, 0 15px 6px transparent;
}

.u-depth3:before, .u-depth3:after {
  transition: box-shadow 0.7s 0.01s cubic-bezier(0.19, 1, 0.22, 1);
}
.u-depth3:before {
  opacity: 0.19;
  box-shadow: 0 1px 10px transparent, 0 3px 15px transparent, 0 10px 40px var(--depth-color), 0 14px 50px transparent, 0 19px 70px transparent;
}
.u-depth3:after {
  opacity: 0.23;
  box-shadow: 0 1px 1px transparent, 0 3px 3px transparent, 0 6px 3px var(--depth-color), 0 10px 5px transparent, 0 15px 6px transparent;
}

.u-depth4:before, .u-depth4:after {
  transition: box-shadow 0.7s 0.01s cubic-bezier(0.19, 1, 0.22, 1);
}
.u-depth4:before {
  opacity: 0.25;
  box-shadow: 0 1px 10px transparent, 0 3px 15px transparent, 0 10px 40px transparent, 0 14px 50px var(--depth-color), 0 19px 70px transparent;
}
.u-depth4:after {
  opacity: 0.22;
  box-shadow: 0 1px 1px transparent, 0 3px 3px transparent, 0 6px 3px transparent, 0 10px 5px var(--depth-color), 0 15px 6px transparent;
}

.u-depth5:before, .u-depth5:after {
  transition: box-shadow 0.7s 0.01s cubic-bezier(0.19, 1, 0.22, 1);
}
.u-depth5:before {
  opacity: 0.30;
  box-shadow: 0 1px 10px transparent, 0 3px 15px transparent, 0 10px 40px transparent, 0 14px 50 transparent, 0 19px 70px var(--depth-color);
}
.u-depth5:after {
  opacity: 0.22;
  box-shadow: 0 1px 1px transparent, 0 3px 3px transparent, 0 6px 3px transparent, 0 10px 5px transparent, 0 15px 6px var(--depth-color);
}