Borders and Decorations

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
Visuals: captured from real browser rendering
<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>

  1. Lay out the receipt card.

    A flat white card sits inside the viewport.
    A base card gets padding, rounded corners, and a fixed width.

  2. Add a single drop shadow.

    A soft shadow lifts the card off the viewport.
    A single offset and blur makes the card feel raised.

  3. Stack an ambient shadow beneath the drop shadow.

    The card now sits on a deeper combined shadow.
    A second tighter shadow grounds the card under the wider drop.

  4. Add an inset hairline.

    A thin teal hairline traces the inside edge.
    An inset shadow becomes a colored hairline inside the rounded corners.
box-shadow box-shadow paints a shadow around or inside an element.
shadow layers Multiple comma separated shadow layers stack into one composite effect.