CSS Shadows

Two shadows

box-shadow paints outside (or inside) the border box. It does not change layout width. The card still occupies the same space; the shade is extra ink on the paper behind it.

text-shadow paints behind glyphs. It is for a heading on a photo or a short label, not for a paragraph. Soft blur keeps letters sharp. A hard offset with no blur looks like a duplicate of the word.

box-shadow syntax

Read a shadow left to right: how far sideways, how far down, how soft, how much extra size, then the color. Spread is optional. Color is often a sky navy at low alpha so the shade tints the paper instead of drawing a black smear.

<style>
  body {
    font-family: Georgia, serif;
    margin: 1.25rem;
    background: #f0f9ff;
    color: #0c4a6e;
  }
  .card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.15rem 1.25rem;
    max-width: 22rem;
    box-shadow: 0 12px 28px rgba(12, 74, 110, 0.16);
  }
</style>
<article class="card">
  <h1>Harbor studio</h1>
  <p>Open 8–16. Tide chart at the desk.</p>
</article>

0 sideways and 12px down puts the shade below the card, as if the light were above. Equal x and y offsets slide the shade toward a corner. Negative y lifts the shade above the box.

Hover lift and inset

A second, slightly larger shadow on :hover makes a card feel clickable. Pair it with a smalltranslateY in the transforms chapter if you want the box to move. The shadow alone is enough for a first pass.

Prefix inset to draw the shade inside the box — a pressed button or a shallow well. Inset shadows still do not change layout.

<style>
  body {
    font-family: Georgia, serif;
    margin: 1.25rem;
    background: #e0f2fe;
    color: #0c4a6e;
  }
  button {
    font: inherit;
    background: #fff;
    color: #0c4a6e;
    border: 1px solid #7dd3fc;
    border-radius: 0.65rem;
    padding: 0.55rem 1.1rem;
    box-shadow: 0 4px 10px rgba(12, 74, 110, 0.12);
    cursor: pointer;
  }
  button:hover {
    box-shadow: 0 10px 22px rgba(12, 74, 110, 0.2);
  }
  .well {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.65rem;
    background: #f0f9ff;
    box-shadow: inset 0 2px 6px rgba(12, 74, 110, 0.18);
  }
</style>
<h1>Harbor studio</h1>
<p><button type="button">Book a desk</button></p>
<p class="well">Inset well — the shade sits inside the padding box.</p>

text-shadow

Same order, no spread: x, y, blur, color. On a dark header, a short dark shadow under light type can help. On a pale page, skip it — gray letters with a glow look dirty, not lifted.

<style>
  body {
    font-family: Georgia, serif;
    margin: 0;
  }
  header {
    background: linear-gradient(to right, #0c4a6e, #0284c7);
    color: #fff;
    padding: 1.75rem 1.25rem;
  }
  h1 {
    margin: 0;
    font-size: 2rem;
    text-shadow: 0 2px 8px rgba(8, 47, 73, 0.45);
  }
  p {
    margin: 0.4rem 0 0;
    text-shadow: none;
  }
</style>
<header>
  <h1>Harbor studio</h1>
  <p>Open 8–16. The paragraph stays unshadowed.</p>
</header>

Comma-separated layers

Both properties accept a list. A tight dark shadow plus a wide faint one mimics a real lamp better than a single value. Keep the list short.

Shadows are still. The next chapter moves the box: translate, rotate, andscale, with transform-origin as the pivot.