Guida CSS interattiva: Box-shadow

Q: Qual è la sintassi di box-shadow?

box-shadow: offset-x offset-y blur spread color;, per esempio box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Solo i due offset sono obbligatori; aggiungi inset per disegnare l'ombra dentro il box.

Come funziona box-shadow

box-shadow dipinge un'ombra attorno al border box di un elemento. Segue border-radius, non occupa spazio nel layout e richiede almeno due valori: di quanto spostarla in orizzontale e in verticale.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 16px; }
    .row { display: flex; gap: 24px; flex-wrap: wrap; }
    .card {
      width: 150px; padding: 20px 12px; text-align: center;
      background: white; border-radius: 10px; font-size: 14px;
    }
    .hard { box-shadow: 6px 6px 0 #111827; }
    .soft { box-shadow: 0 4px 12px rgb(0 0 0 / 15%); }
    .inset { box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="card hard">6px 6px 0 #111827</div>
    <div class="card soft">0 4px 12px, 15% black</div>
    <div class="card inset">inset 0 2px 6px</div>
  </div>
</body>
</html>

La sintassi

box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] [<color>];

Valore	Significato	Predefinito
`inset`	Disegna l'ombra dentro il box, come una zona premuta verso l'interno	Fuori
offset-x	Un valore positivo sposta a destra, uno negativo a sinistra	Obbligatorio
offset-y	Un valore positivo sposta in basso, uno negativo in alto	Obbligatorio
blur	Quanto è morbido il bordo; non può essere negativo	`0` (un bordo netto)
spread	Ingrandisce (positivo) o riduce (negativo) l'ombra	`0`
colore	Qualsiasi colore; di solito un nero semitrasparente rende meglio	Il colore del testo

Il numero di lunghezze ne decide il significato: due sono gli offset, tre aggiungono il blur, quattro aggiungono lo spread. Prova:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      width: 160px; height: 90px; margin: 32px;
      background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
    }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>box-shadow: <input id="val" value="0 10px 20px -5px rgb(37 99 235 / 50%)" size="36"></label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.boxShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(box).boxShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Prova 0 0 0 4px #f59e0b (un anello), inset 0 0 12px #2563eb e -8px -8px 0 #16a34a.

Spread: anelli e ombre su un solo lato

Lo spread cambia la dimensione dell'ombra prima della sfocatura. Ne derivano due schemi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spread</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
    .box { width: 140px; padding: 18px 10px; text-align: center; background: white; border: 1px solid #e5e7eb; font-size: 14px; }
    .ring { box-shadow: 0 0 0 4px #2563eb; border-radius: 8px; }
    .double { box-shadow: 0 0 0 3px white, 0 0 0 6px #16a34a; border-radius: 8px; }
    .bottom { box-shadow: 0 10px 8px -8px rgb(0 0 0 / 50%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="box ring">4px ring</div>
    <div class="box double">gap then ring</div>
    <div class="box bottom">bottom only</div>
  </div>
</body>
</html>

Un anello: niente offset, niente blur, solo spread. A differenza di un bordo, non cambia le dimensioni dell'elemento, quindi è un buon indicatore di focus (:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
Un anello con uno stacco: sovrapponi uno spread bianco sotto uno colorato e più grande.
Un solo lato: sposta l'ombra verso il basso e riducila con uno spread negativo, così spunta solo sotto.

Ombre sovrapposte per una profondità realistica

Le ombre vere hanno una parte scura e netta vicino all'oggetto e una parte morbida e tenue più lontano. Due o tre livelli lo imitano molto meglio di un'unica grande sfocatura:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Elevation</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 24px 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; }
    .card { width: 140px; padding: 24px 10px; text-align: center; background: white; border-radius: 12px; font-size: 14px; }
    .one { box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
    .layered {
      box-shadow:
        0 1px 2px rgb(0 0 0 / 12%),
        0 4px 8px rgb(0 0 0 / 8%),
        0 12px 24px rgb(0 0 0 / 8%);
    }
    .lift { transition: transform 0.2s, box-shadow 0.2s; }
    .lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 16px 32px rgb(0 0 0 / 14%);
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="card one">One heavy shadow</div>
    <div class="card layered">Three layers</div>
    <div class="card layered lift">Hover me</div>
  </div>
</body>
</html>

La prima ombra dell'elenco viene dipinta sopra. Usa per le ombre un nero semitrasparente o una tinta scura dello sfondo, mai un grigio pieno, così scuriscono qualunque cosa ci sia sotto.

Ombre inset

inset disegna l'ombra dentro il padding box, come se la superficie fosse premuta verso l'interno. È adatta a campi di testo, riquadri incassati e pulsanti premuti:

input {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
button:active {
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 30%);
}

Un'ombra inset viene disegnata sopra lo sfondo ma sotto il contenuto. Le ombre che seguono la forma delle lettere invece del box sono text-shadow.

Errori comuni

Ombre nere pure e del tutto opache. Sembrano un contorno scuro. Usa un alfa tra il 10% e il 30%.
Un'unica enorme sfocatura per dare profondità. Sovrapponi un'ombra piccola e netta a una grande e morbida.
Un'ombra tagliata sul bordo. Un antenato con overflow: hidden la ritaglia; aggiungi padding all'antenato o sposta la regola di overflow.
Blur negativo. Non è valido e l'intera dichiarazione viene ignorata.
Animare box-shadow su molti elementi. Ridisegna a ogni fotogramma. Nelle pagine pesanti, anima invece la opacity di uno pseudo-elemento che porta l'ombra più grande.

Domande frequenti

Qual è la sintassi di box-shadow?

box-shadow: offset-x offset-y blur spread color;, per esempio box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Solo i due offset sono obbligatori; aggiungi inset per disegnare l'ombra dentro il box.

Cosa fa spread in box-shadow?

Ingrandisce (valore positivo) o riduce (valore negativo) l'ombra prima della sfocatura. Un'ombra senza offset, senza blur e con uno spread di 3px è un anello pieno di 3px attorno all'elemento.

Come metto un'ombra solo sotto?

Spostala verso il basso e restringila con uno spread negativo, così i lati spariscono: box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);.

box-shadow influisce sul layout?

No. Un'ombra non occupa spazio e non sposta gli altri elementi, ed è per questo che è un buon modo per aggiungere un anello di focus o un effetto di sollevamento all'hover senza spostamenti del layout. Può essere ritagliata da un antenato con overflow: hidden.

Posso avere più ombre box-shadow?

Sì, separale con virgole. La prima ombra viene disegnata sopra. Sovrapporre un'ombra piccola e netta a una grande e morbida dà un aspetto più naturale di un'unica grande ombra.

Concetti correlati