IT

Generatore di box-shadow CSS

Scegli un modello oppure imposta spostamento, sfocatura, estensione, colore e opacità con i cursori. Puoi sovrapporre più ombre e trasformare ognuna in un’ombra interna (inset). L’anteprima si aggiorna subito e il CSS pronto si copia con un clic. Più sotto puoi anche incollare il tuo CSS e continuare a modificarlo.

Regola l’ombra

Modelli

box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.25),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);
Un’ombra per riga, separate da virgole – es. 0 4px 12px rgba(0, 0, 0, 0.12)
I dati inseriti vengono salvati solo in questo browser.

Risultato

Dichiarazione CSS
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
Livelli d’ombra (il primo sta sopra)
N.Spostamento X (px)Spostamento Y (px)Sfocatura (px)Estensione (px)ColoreTipo
10 px10 px25 px-5 pxrgba(0, 0, 0, 0.25)esterna
20 px8 px10 px-6 pxrgba(0, 0, 0, 0.1)esterna
Quanto l’ombra sporge dal riquadro (circa)
sopra 10 px · destra 20 px · sotto 30 px · sinistra 20 px

Come si calcola

Come funziona box-shadow

Secondo la specifica W3C (CSS Backgrounds and Borders Level 3), un’ombra è formata da due a quattro lunghezze, un colore facoltativo e la parola chiave facoltativa inset:

ValoreSignificato
1ª lunghezzaSpostamento orizzontale verso destra (negativo: verso sinistra)
2ª lunghezzaSpostamento verticale verso il basso (negativo: verso l’alto)
3ª lunghezzaRaggio di sfocatura, mai negativo; 0 se omesso
4ª lunghezzaEstensione (spread): ingrandisce l’ombra, un valore negativo la riduce
Colorese omesso, si usa il colore del testo (currentColor)
insetdisegna l’ombra all’interno del riquadro invece che all’esterno

Separa più ombre con una virgola. La prima ombra viene disegnata sopra, le altre dietro. Le ombre non influiscono sul layout e non creano barre di scorrimento, ma un genitore con overflow: hidden le ritaglia.

Fin dove arriva la sfocatura?

La specifica richiede una sfocatura simile a una sfocatura gaussiana con deviazione standard pari alla metà del raggio di sfocatura. La transizione risultante è larga circa il doppio del valore di sfocatura ed è centrata sul bordo dell’ombra: verso l’esterno arriva quindi per circa un raggio di sfocatura.

Esempio 0 10px 25px -5px: il bordo si trova a 25 − 5 = 20 px dal riquadro, spostato 10 px verso il basso. L’ombra sporge quindi di circa 20 − 10 = 10 px in alto, 20 px sui lati e 20 + 10 = 30 px in basso. Il generatore mostra questi valori sotto “Quanto l’ombra sporge” – utili come padding per non ritagliare nulla.

Usi comuni

Domande frequenti

Che differenza c’è tra blur e spread?

La sfocatura (3° valore) ammorbidisce il bordo senza cambiare la superficie di base dell’ombra. L’estensione (4° valore) ingrandisce o riduce l’area dell’ombra prima che venga sfocata. Con sfocatura 0 ed estensione positiva si ottiene un contorno netto.

Come sovrappongo più ombre?

Separale con una virgola, es. 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24). La prima ombra viene disegnata sopra. Nel generatore aggiungi altri livelli con “+ Ombra”.

Perché la mia ombra viene tagliata?

Le ombre non contano per la dimensione dell’elemento. Se un genitore ha overflow: hidden o overflow: auto, tutto ciò che sporge viene ritagliato. Dai al genitore almeno il padding indicato dal generatore sotto “sporgenza dell’ombra”.

box-shadow funziona su tutti i browser?

Sì. box-shadow, comprese ombre multiple, inset e colori rgba(), è supportato senza prefisso da tutti i browser attuali. Il generatore scrive i colori trasparenti come rgba(), comprensibili anche dai browser più vecchi.

Fonti e riferimenti normativi

Aggiornato al:

Strumenti correlati