<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); }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.