Proprietà CSS box-shadow

La proprietà box-shadow consente di aggiungere una o più ombre intorno a un elemento specificando valori per lo scostamento orizzontale, lo scostamento verticale, il raggio di sfocatura, il raggio di espansione, il colore e la parola chiave inset. Questa pagina illustra ciascuno di questi valori e mostra come combinarli per creare ombre multiple, ombre interne (inset), ombre su un solo lato e pattern UI comuni come le card in rilievo.

La proprietà box-shadow è una delle proprietà CSS3.

È possibile aggiungere effetti separati da virgole. Se si specifica un border-radius sull'elemento con un'ombra, la box-shadow adotterà gli stessi angoli arrotondati.

Questi sono due valori che impostano lo scostamento dell'ombra. H-offset specifica la distanza orizzontale. I valori positivi posizionano l'ombra a destra dell'elemento. I valori negativi la posizionano a sinistra. V-offset specifica la distanza verticale. Un valore positivo posiziona l'ombra sotto l'elemento, mentre un valore negativo la posiziona sopra. Se entrambi i valori sono 0, l'ombra appare direttamente dietro l'elemento.

Il terzo valore è il raggio di sfocatura. È opzionale. Più alto è il numero, più grande e leggera diventa la sfocatura. I valori negativi non sono validi. Se omesso o impostato su 0, il bordo dell'ombra è netto.

Il quarto valore è il raggio di espansione. È opzionale. I valori positivi fanno espandere l'ombra, mentre i valori negativi la fanno restringere. Se omesso o impostato su 0, l'ombra ha le stesse dimensioni dell'elemento.

Il quinto valore è il colore. È opzionale. Se omesso, l'ombra assume il colore del testo calcolato dell'elemento.

Il sesto valore è la parola chiave inset. È opzionale e può essere posizionata in qualsiasi punto della definizione dell'ombra. Quando presente, crea un'ombra interna invece di un'ombra esterna.

Un dettaglio sottile ma importante: il colore dell'ombra viene quasi sempre impostato con un valore semi-trasparente come rgba(0, 0, 0, 0.2) anziché un colore solido. Un nero semi-trasparente si fonde con qualsiasi sfondo dietro l'elemento, quindi l'ombra appare naturale su qualsiasi sfondo. I colori solidi come black o gray tendono a risultare troppo duri.

Valore iniziale	none
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter.
Ereditato	No.
Animabile	Sì. L'ombra del box è animabile.
Versione	CSS3
Sintassi DOM	object.style.boxShadow = "15px 25px 35px gray";

Sintassi

Sintassi della proprietà CSS box-shadow

box-shadow: none | h-offset v-offset blur-radius spread-radius color inset;

Proviamo ad aggiungere ombre a un elemento.

Esempio della proprietà box-shadow:

Esempio della proprietà CSS box-shadow

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 50px;
        background-color: #eee;
        box-shadow: 5px 4px 10px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow example</h2>
    <div></div>
  </body>
</html>

Provalo tu stesso »

Risultato

Ombre multiple

È possibile separare la box-shadow con virgole per molti valori. Ad esempio, il codice seguente mostra 3 ombre con colori e posizioni diversi sullo stesso elemento.

Esempio di utilizzo della proprietà box-shadow per aggiungere più ombre all'elemento:

Esempio della proprietà CSS box-shadow con valori multipli

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 50%;
        height: 100px;
        border: 1px solid;
        padding: 10px;
        box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Multiple shadows with box-shadow.</h2>
    <div></div>
  </body>
</html>

Provalo tu stesso »

Risultato

Ora aggiungiamo all'elemento il valore inset. Esso aggiunge un'ombra all'interno del box.

Esempio della proprietà box-shadow con il valore "inset":

Esempio della proprietà CSS box-shadow con valore inset

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 50px;
        background-color: #eee;
        box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow with inset value</h2>
    <div></div>
  </body>
</html>

Provalo tu stesso »

Risultato

Ombra su un solo lato

Per creare un'ombra che appaia solo su un lato del box, si utilizza un valore negativo per il raggio di espansione.

Proprietà CSS box-shadow

.shadow {
  box-shadow: 0 10px 8px -4px yellow;
}

Esempio della proprietà box-shadow con un valore negativo per il raggio di espansione:

Esempio della proprietà box-shadow

<!DOCTYPE html>
<html>
  <head>
    <style>
      .shadow {
        width: 100px;
        height: 100px;
        box-shadow: 0 10px 8px -4px yellow;
        background-color: #cccccc;
      }
    </style>
  </head>
  <body>
    <div class="shadow"></div>
  </body>
</html>

Provalo tu stesso »

Casi d'uso comuni

L'utilizzo più frequente di box-shadow è sollevare un elemento dalla pagina in modo che appaia come una superficie separata — card, menu a discesa, finestre modali e pulsanti ne fanno tutti uso. Un'ombra morbida e semi-trasparente con un piccolo scostamento verticale trasmette un'elevazione leggera:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .card {
        width: 220px;
        padding: 20px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: box-shadow 0.2s ease;
      }
      .card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
      }
    </style>
  </head>
  <body>
    <div class="card">Hover me to raise the card.</div>
  </body>
</html>

Poiché box-shadow è animabile, abbinarla a una transition permette all'elemento di sembrare che si sollevi al passaggio del mouse, come mostrato sopra. Sovrapporre più ombre in un singolo valore separato da virgole produce una profondità più morbida e realistica rispetto a un'unica ombra pesante:

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07);
}

Alcune cose da tenere a mente:

Le ombre non influenzano il layout. Una box-shadow viene disegnata al di fuori del box model, quindi non spinge gli elementi vicini né si aggiunge alla larghezza e all'altezza dell'elemento. Usa margin se è necessario riservare spazio per essa.
Gli angoli arrotondati vengono rispettati. Quando l'elemento ha un border-radius, l'ombra segue automaticamente la stessa curva.
Prestazioni. Raggi di sfocatura molto grandi e molte ombre sovrapposte sono costosi da ridisegnare, specialmente durante le animazioni. Mantieni i valori di sfocatura moderati ed evita di animare ombre pesanti su elementi di grandi dimensioni.

Valori

Valore	Descrizione	Prova
none	Nessuna ombra viene applicata.	Prova »
h-offset	Obbligatorio. Lo scostamento orizzontale dell'ombra. Un valore positivo posiziona l'ombra a destra del box, un valore negativo la posiziona a sinistra.	Prova »
v-offset	Obbligatorio. Lo scostamento verticale dell'ombra. Un valore positivo posiziona l'ombra sotto il box, un valore negativo la posiziona sopra.	Prova »
blur-radius	Opzionale. L'ombra viene sfocata. Più alto è il numero, più sfocata sarà l'ombra. I valori negativi non sono validi.	Prova »
spread-radius	Opzionale. L'ombra si espande. Un valore positivo aumenta le dimensioni dell'ombra, un valore negativo le riduce.	Prova »
color	Opzionale. Il colore dell'ombra. Se omesso, assume il colore del testo dell'elemento.	Prova »
inset	Opzionale. Una parola chiave opzionale che può essere posizionata in qualsiasi punto della definizione dell'ombra. Trasforma un'ombra esterna in un'ombra interna.	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita la proprietà dall'elemento genitore.

Pratica

Quali proprietà possono essere regolate quando si definisce un box-shadow in CSS?