<h1>Material Design 3 <code>box-shadow</code> CSS Values</h1>
<div class="card box-shadow-z1">z-1</div>
<div class="card box-shadow-z2">z-2</div>
<div class="card box-shadow-z3">z-3</div>
<div class="card box-shadow-z4">z-4</div>
<div class="card box-shadow-z5">z-5</div>
/* These values are taken from the scss partial within Material's github repo */

/* https://github.com/material-components/material-web/blob/123c1e01af1ef71dbd0597c1372af17aa0ad0c0e/elevation/lib/_elevation.scss */

body {
  font-family: sans-serif;
}

.card {
  background: #0A58D0;
  border-radius: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin-right: 40px;
  margin-bottom: 40px;
  color: #fff;
}

.box-shadow-z1 {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); }

.box-shadow-z2 {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.3); }

.box-shadow-z3 {
  box-shadow: 0 11px 7px 0 rgba(0, 0, 0, 0.19), 0 13px 25px 0 rgba(0, 0, 0, 0.3); }

.box-shadow-z4 {
  box-shadow: 0 14px 12px 0 rgba(0, 0, 0, 0.17), 0 20px 40px 0 rgba(0, 0, 0, 0.3); }

.box-shadow-z5 {
  box-shadow: 0 17px 17px 0 rgba(0, 0, 0, 0.15), 0 27px 55px 0 rgba(0, 0, 0, 0.3); }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.