CSS Box Shadow: Guida Completa con Esempi

Padroneggia la sintassi box-shadow, i livelli multipli, le ombre interne e i sistemi di elevazione per il design UI moderno.

6 min di lettura CSS · Design · UI 6 sezioni + FAQ

Le ombre box sono una delle proprieta CSS piu versatili. Un'ombra ben realizzata puo far sembrare qualsiasi elemento ancorato, elevato o interattivo.

La sintassi box-shadow e ingannevolmente semplice ma le possibilita di design sono vaste. Sovrapporre piu ombre crea una profondita piu realistica.

Sintassi box-shadow

La sintassi completa box-shadow e: box-shadow: offset-x offset-y blur-radius spread-radius color. Tutti i valori tranne offset-x e offset-y sono opzionali. Piu ombre sono separate da virgole.

Tool gratuito Generatore Box Shadow Crea ombre box CSS complesse con anteprima live

Offset X/Y, sfocatura, diffusione, colore

Offset-X e la distanza orizzontale (positiva = destra, negativa = sinistra). Offset-Y e la distanza verticale (positiva = giu, negativa = su). Blur-radius controlla la morbidezza. Spread-radius espande o contrae l'ombra.

Ombre multiple e layering

Sovrapporre piu valori box-shadow crea effetti di profondita piu realistici. Una tecnica comune: combina una piccola ombra nitida ambientale con una piu grande ombra chiave morbida.

Tool gratuito Generatore Filtri CSS Applica sfocatura, luminosità, contrasto e altro con i filtri CSS

Ombre interne

La parola chiave inset inverte la direzione dell'ombra — invece di apparire fuori dall'elemento, appare dentro. Le ombre interne sono usate per: stati di pulsante premuto, smussi interni, cerchi di focus degli input.

Sistemi di elevazione

Material Design 3 definisce livelli di elevazione da 0 a 5 usando valori box-shadow. Ogni livello corrisponde a un caso d'uso: 0 per superfici piatte, 1 per schede, 2 per pulsanti, 3 per menu, 4 per modali.

Tecnica neumorphism

Il neumorphism usa due box-shadow sullo stesso elemento: un'ombra chiara in alto a sinistra e una scura in basso a destra. L'elemento sembra estroflesso dallo sfondo.

Tool gratuito Generatore Glassmorphism Crea effetti UI vetro smerigliato con CSS backdrop-filter

Domande frequenti

Qual e la differenza tra box-shadow e filter: drop-shadow? +
box-shadow segue la forma rettangolare dell'elemento. filter: drop-shadow segue la forma visibile effettiva incluse le parti trasparenti delle immagini.
Come creo un'ombra senza offset? +
Imposta sia offset-x che offset-y a 0. Un'ombra centrata senza offset sembra un effetto bagliore.
Quali colori dovrei usare per le ombre? +
Evita il nero puro. Usa una versione molto scura del tuo colore di sfondo o un colore scuro e desaturato. Le ombre piu naturali usano rgba con bassa alpha.
Come animo box-shadow? +
box-shadow e animabile con CSS transition. Tuttavia, animare box-shadow attiva layout e paint — per le prestazioni, preferisci animare l'opacity su un pseudo-elemento.
Posso usare piu valori box-shadow? +
Si. Separa piu valori di ombra con virgole. La prima ombra viene resa in cima.
Cos'e spread-radius in box-shadow? +
Spread-radius espande (valore positivo) o contrae (valore negativo) l'ombra in tutte le direzioni prima che venga applicata la sfocatura.
Come creo un'ombra interna? +
Aggiungi la parola chiave inset prima dei valori di offset: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1).