Shadows

box-shadow

The values are: x-offset y-offset blur spread color. Bigger blur and a soft colour = a gentle, modern shadow.

<style>
  .card { background:#fff; padding:20px; border-radius:14px; margin:14px;
          box-shadow: 0 8px 24px rgba(20,24,48,0.12); }
  .deep { box-shadow: 0 20px 50px rgba(67,56,202,0.35); }
</style>
<div class="card">Soft, subtle shadow</div>
<div class="card deep">Deeper, coloured shadow</div>

Read box-shadow: 0 8px 24px rgba(20,24,48,0.12) as four parts in order: 0 horizontal offset (no left/right shift), 8px vertical offset (the shadow drops below the card), 24px blur (how soft and spread-out it is), and a faint dark colour. The low opacity (0.12) keeps it subtle, so the first card looks gently lifted off the page. The second card (.deep) uses bigger numbers and a stronger colour, so it appears to float much higher. Bigger offset + bigger blur = more “elevation”.

text-shadow

A shadow can sit behind text too, not just behind boxes. text-shadow takes the same kind of values as box-shadow but applies them to the letters. The example below adds a soft shadow to a heading so it stands out on a coloured banner:

<style>
  .hero { background:#4338ca; color:#fff; padding:30px; text-align:center; border-radius:10px; }
  .hero h2 { text-shadow: 2px 2px 6px rgba(0,0,0,0.4); font-size:30px; }
</style>
<div class="hero"><h2>Text with a shadow</h2></div>

text-shadow works just like box-shadow but on the letters themselves: 2px 2px 6px rgba(0,0,0,0.4) means shift the shadow 2px right, 2px down, blur it 6px, in a semi-transparent black. On the indigo banner this lifts the white heading off the background and makes it easier to read. A soft text-shadow is a classic trick for making text legible over a busy photo or coloured hero.