È possibile utilizzare le ombre esterne (box shadow) per creare un effetto visivo in cui un elemento sembra fluttuare sopra lo sfondo. Questo effetto può aggiungere profondità, evidenziare elementi specifici e aumentare l'interesse visivo di una pagina web. Per ottenere questo risultato si applica la proprietà box-shadow.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

• offset-x indica il posizionamento orizzontale dell'ombra; un valore positivo sposta l'ombra a destra dell'elemento, mentre un valore negativo la sposta a sinistra;
• offset-y indica il posizionamento verticale dell'ombra; un valore positivo sposta l'ombra verso il basso, mentre un valore negativo la sposta verso l'alto;
• blur-radius imposta il grado di sfocatura dell'ombra ed è un valore opzionale; un valore più alto produce un'ombra più sfocata;
• spread-radius è anch'esso opzionale e aumenta o diminuisce la dimensione dell'ombra in base al valore positivo o negativo;
• color specifica il colore dell'ombra utilizzando qualsiasi formato colore valido, ed è anch'esso un valore opzionale.

Nota

Per trovare l'ombra più adatta visita la fonte generatore di ombre.

Oltre alla proprietà box-shadow, le proprietà text-shadow e drop-shadow permettono di creare ombre rispettivamente per il testo e per altri elementi. Funzionano nello stesso modo della proprietà box-shadow. Tuttavia, queste proprietà sono utilizzate raramente rispetto a box-shadow.