How to add a shadow

Short answer

box-shadow takes the horizontal and vertical offset, the blur and the color:

<div style="margin: 8px; padding: 16px; border-radius: 12px; box-shadow: 0 4px 12px rgb(0 0 0 / 20%);">A card with a shadow</div>

Semi-transparent black looks more natural than solid gray: the shadow blends with any background.

A soft layered shadow

Several comma-separated shadows give a more realistic depth, and a fourth number — the spread — grows or shrinks the shadow. The inset keyword makes the shadow go inside:

<div style="display: flex; gap: 16px; padding: 12px;">
  <div style="padding: 16px; border-radius: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 8px 24px -4px rgb(0 0 0 / 20%);">Layered</div>
  <div style="padding: 16px; border-radius: 12px; box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%);">Inset</div>
</div>

A shadow on hover

This makes a card "lift":

<style>
  .card { margin: 8px; padding: 16px; border-radius: 12px; border: 1px solid gainsboro; transition: box-shadow 0.2s; }
  .card:hover { box-shadow: 0 8px 20px rgb(0 0 0 / 25%); }
</style>
 
<div class="card">Hover over me</div>

Text has its own property, text-shadow — see the answer on adding a text shadow.

Common mistake

The shadow gets cut off when the parent has overflow: hidden and no padding: the shadow is drawn outside the box, and the parent hides everything past its edge. Add padding to the parent or remove the clipping.