Box Shadow Layers

A receipt card starts flat, gains a single drop shadow, layers a tighter ambient shadow underneath, and finally adds an inset hairline that traces the inner edge.

Program

box-shadow can carry more than one layer separated by commas. Drop, ambient, and inset shadows combine into one polished frame.

box_shadow_layers.html

<style>
.card { background: white; padding: 22px; border-radius: 12px; max-width: 360px; margin: 24px; }
.card { box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); }
.card { box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.08); }
.card { box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(15, 118, 110, 0.45); }
</style>

<section class="card">
  <h2>Receipt</h2>
  <p>Coffee order confirmed</p>
</section>

box-shadow box-shadow paints a shadow around or inside an element.

shadow layers Multiple comma separated shadow layers stack into one composite effect.