Generatore CSS Box Shadow
Crea bellissime ombre visivamente e copia il CSS.
Preimpostazioni
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.25);
Come usare lo strumento
- Trascina i cursori per regolare offset orizzontale e verticale, sfocatura, estensione e opacità.
- Scegli un colore d'ombra e attiva «inset» se necessario.
- Clicca su «Aggiungi un livello d'ombra» per impilare più ombre.
- Usa una preimpostazione come punto di partenza rapido.
- Clicca su «Copia il CSS» per incollare il risultato nel tuo foglio di stile.
Domande frequenti
Cos'è box-shadow in CSS?
La proprietà CSS box-shadow aggiunge effetti d'ombra attorno a un elemento. Accetta valori per l'offset orizzontale, l'offset verticale, il raggio di sfocatura, il raggio di estensione e il colore.
Posso aggiungere più ombre?
Sì. Clicca su «Aggiungi un livello d'ombra» per aggiungere un'altra ombra. Le ombre multiple sono separate da virgole nell'output CSS. Questo permette di creare effetti sovrapposti complessi.
A cosa serve la parola chiave inset?
Aggiungere «inset» fa apparire l'ombra all'interno dell'elemento invece che all'esterno, creando un'ombra interna o un effetto «infossato».
I cinque parametri di box-shadow
Il CSS box-shadow applica uno o più effetti di ombra all'area del bordo di un elemento. La sintassi è box-shadow: <color>? <offset-x> <offset-y> <blur-radius>? <spread-radius>? inset?, con più ombre separate da virgole. Ogni parametro svolge una funzione specifica:
- offset-x: distanza di cui l'ombra viene spostata orizzontalmente. I valori positivi spostano a destra; quelli negativi a sinistra.
0centra orizzontalmente. - offset-y: spostamento verticale. I valori positivi spostano verso il basso (mimano un'illuminazione dall'alto, la convenzione UI più comune). I valori negativi spostano verso l'alto.
- blur-radius: distanza entro cui il bordo dell'ombra sfuma verso il trasparente. Implementato come convoluzione gaussiana; valori più grandi producono ombre più morbide, grandi e diffuse. I valori negativi non sono validi;
0produce un bordo duro e netto. - spread-radius: aumenta (positivo) o riduce (negativo) la forma dell'ombra prima che venga applicata la sfocatura. Uno spread positivo espande l'ombra in ogni direzione; uno negativo la contrae, consentendo di limitare l'ombra a un solo lato del box.
- color: il valore predefinito è
currentcolor(il valorecolordell'elemento stesso, che a volte sorprende). Le ombre nelle UI usano quasi sempre un nero o quasi-nero con bassa opacità, dargba(0,0,0,0.05)argba(0,0,0,0.25): le ombre nere solide appaiono pesanti e innaturali. - La parola chiave inset disegna l'ombra all'interno del box anziché all'esterno. Usata per gli stati del pulsante premuto, i campi di input incassati («well») e i bagliori interni.
Il browser compone un elenco di ombre dal davanti verso il fondo: la prima ombra elencata è la più vicina all'osservatore, l'ultima è la più lontana. Questo ordinamento è lo stesso di text-shadow e background, ma è l'opposto del modo in cui la maggior parte delle regole CSS si applicano a cascata: una sorpresa comune per i nuovi autori.
Il sistema di elevazione a due ombre di Material Design
Material Design di Google (introdotto nel maggio 2014; Material Design 3 nel 2021) definisce un sistema di elevazione quantizzato in cui le superfici UI si trovano a uno dei diversi livelli in pixel indipendenti dalla densità. La ricetta dell'ombra a ogni livello usa due ombre sovrapposte:
- Umbra (ombra principale), più piccola e più scura, rappresenta la luce direttamente bloccata sotto la superficie. Offset e sfocatura contenuti.
- Penombra (ombra ambientale), più grande e più diffusa, rappresenta la luce dispersa che rimbalza nella stanza. Offset più ampio, sfocatura più ampia, alfa più leggero.
In Material Design 2, i valori di elevazione vanno da 0dp (nessuna ombra) a 24dp; le card usano tipicamente 1-2dp a riposo e si animano fino a 8dp al passaggio del cursore, mentre le finestre di dialogo modali usano 24dp. Material Design 3 ha condensato la scala in cinque Livelli nominati (da 1 a 5) e ha aggiunto overlay tintati oltre alle ombre nella modalità scura. La struttura umbra-più-penombra rimane il modello visivo, ed è per questo che shadow-md di Tailwind viene distribuito come due ombre sovrapposte: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06).
Il neumorfismo: la tendenza che necessitava di due ombre opposte
Il neumorfismo (parola valigia di «new» e «skeuomorphism») è diventato virale verso fine 2019 / inizio 2020 dopo che un post Dribbble del dicembre 2019 del designer ucraino Alexander Plyuto intitolato «Skeuomorph Mobile Banking» ha raccolto decine di migliaia di mi piace in poche settimane. La ricetta distintiva è due box-shadow su un elemento con lo stesso colore di sfondo del suo genitore: un'ombra più scura in basso a destra e un'ombra più chiara in alto a sinistra. Il lato scuro simula la superficie che si allontana da una fonte di luce; il lato chiaro simula il sollevamento verso un riflesso sul lato rivolto verso la luce. Invertire gli offset (o aggiungere inset a entrambi) crea un aspetto incassato/premuto.
Avvertenza onesta sull'accessibilità: il neumorfismo è stato ampiamente criticato perché il contrasto visivo tra un elemento e il suo sfondo è necessariamente molto basso: condividono lo stesso colore. Pulsanti e campi di input possono non soddisfare WCAG 1.4.11 (contrasto non testuale, AA, rapporto 3:1 dei componenti UI rispetto ai colori adiacenti). Gli stati premuto e non premuto sono spesso distinguibili solo dalla sottile direzione dell'ombra, che i lettori di schermo non possono comunicare e che è invisibile a chiunque abbia problemi di vista, daltonismo o riflessi sullo schermo. Usare questo stile con parsimonia su superfici decorative, non sui controlli principali.
box-shadow vs filter: drop-shadow()
CSS Filter Effects definisce un'alternativa, filter: drop-shadow(<x> <y> <blur> <color>): visivamente simile ma con una differenza cruciale. box-shadow proietta un'ombra del rettangolo del border box (arrotondato da border-radius se presente). drop-shadow proietta un'ombra del canale alfa dell'elemento renderizzato, inclusi i figli, i PNG trasparenti, le forme SVG con ritagli e i contenuti mascherati. Il motivo più comune per scegliere drop-shadow è che l'elemento di cui si vuole l'ombra non è un rettangolo: un'icona PNG trasparente, un logo SVG, un triangolo di fumetto.
box-shadow | drop-shadow() | |
|---|---|---|
| Parametro spread | Sì | No |
| Variante inset | Sì | No |
| Ombre multiple | Sì (lista separata da virgole) | Sì (filtri concatenati) |
| Influenza i discendenti | No | Sì (intero sottoalbero) |
| Ritaglio | Può estendersi oltre overflow:hidden | Limitato ai confini del filtro |
| Prestazioni | Compatibile con il compositor | Attiva un passaggio di filtro |
Note sulle prestazioni
Box-shadow è una delle proprietà CSS più costose da renderizzare in tempo reale. Il costo ha tre fattori: dimensione del kernel di sfocatura (la sfocatura gaussiana è una convoluzione separabile a due passaggi; raddoppiare la sfocatura quadruplica il lavoro per pixel, quindi una sfocatura di 100 pixel su una card grande può ridurre notevolmente la frequenza dei fotogrammi durante lo scorrimento), superficie dell'ombra (il rettangolo espanso dallo spread e ulteriormente allargato dalla sfocatura è ciò che la GPU deve rasterizzare; le ombre di grandi sovrapposizioni modali sono il tipo più costoso) e ridipinture (animare box-shadow richiede una ridipintura della regione dell'ombra a ogni fotogramma).
Raccomandazioni pratiche:
- Per le animazioni di elevazione al passaggio del cursore, preferire l'animazione di
transform: translateY()eopacityanzichébox-shadow. Queste sono accelerate dalla GPU e non attivano la ridipintura. - Per lo scambio di ombra al passaggio del cursore, dichiarare entrambe le ombre su uno pseudo-elemento con quella più grande a
opacity: 0, quindi animare l'opacità dello pseudo-elemento. Questo scambia le ombre senza animare il kernel di sfocatura stesso; «Shadow Tricks» di Tobias Ahlin (2017) è il riferimento canonico sull'argomento. will-change: transformpuò suggerire al browser di promuovere un elemento al proprio livello del compositor. Usare con parsimonia: promuovere troppi elementi spreca memoria GPU.- Evitare box-shadow su elementi che contengono grandi quantità di contenuto scorrevole. Ogni fotogramma di scorrimento deve ridipingere l'ombra.
Accessibilità
Le ombre sono decorative ai fini dell'albero di accessibilità (i lettori di schermo le ignorano) ma hanno delle implicazioni:
- WCAG 1.4.11 Contrasto non testuale (AA, 3:1). Se una card o un pulsante si distingue dal proprio sfondo solo tramite un'ombra, quell'ombra definisce di fatto il bordo visivo, e una debole ombra
rgba(0,0,0,0.05)su uno sfondo quasi bianco potrebbe non soddisfare la soglia 3:1. Molti design system abbinano l'ombra a un bordo solido da 1px per garantire il contrasto. - Indicatori di focus.
box-shadow: 0 0 0 3px <color>è la moderna alternativa aloutlinepredefinito del browser perché segue ilborder-radius. L'anello deve soddisfare WCAG 2.4.7 Focus Visible, con uno spessore minimo di 2 pixel CSS e un contrasto 3:1 rispetto allo stato non focalizzato e ai colori adiacenti. - Colori forzati / Windows High Contrast. In modalità
forced-colors: active, i browser ignorano la maggior parte dei colori CSS e ricolorano il contenuto con la palette di sistema dell'utente. Le box-shadow vengono rimosse o ridotte; gli stati UI dovrebbero sempre avere un indicatore non basato sull'ombra (cambio di bordo, cambio di colore, icona, etichetta di testo) per questi utenti. - Movimento ridotto. Gli utenti con
prefers-reduced-motion: reducenon dovrebbero vedere grandi animazioni dell'ombra al passaggio del cursore o durante lo scorrimento. Racchiudere le transizioni animate in una media query e mantenere l'ombra a riposo per questi utenti.
Ricette rapide
| Effetto | CSS |
|---|---|
| Leggero sollevamento della card | 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) |
| Card moderna morbida | 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) |
| Sollevamento pesante del modal | 0 25px 50px -12px rgba(0,0,0,0.25) |
| Contorno netto 1px | 0 0 0 1px rgba(0,0,0,0.05) |
| Anello di focus (3px) | 0 0 0 3px rgba(59,130,246,0.5) |
| Input incassato («well») | inset 0 2px 4px 0 rgba(0,0,0,0.06) |
| Alone luminoso | 0 0 20px 4px rgba(99,102,241,0.6) |
Altre domande
Perché la mia ombra viene ritagliata?
Quasi sempre perché un elemento antenato ha overflow: hidden. L'ombra si estende oltre il border box ma viene ritagliata al bordo dell'antenato. Due soluzioni: spostare l'ombra sull'antenato stesso, oppure usare un elemento wrapper senza ritaglio dell'overflow. filter: drop-shadow() non ha questo problema, ma presenta i propri compromessi.
Devo ancora usare prefissi vendor come -webkit-box-shadow?
No. box-shadow senza prefissi è supportato universalmente dal 2012 circa. I prefissi vendor sono puro rumore nel codice del 2026 e vanno eliminati. Le librerie CSS reset dei primi anni 2010 spesso li includevano in via precauzionale; il codice moderno può tranquillamente farne a meno.
Come si applica un'ombra al testo, non al box?
Usare text-shadow, che ha la stessa sintassi di offset / sfocatura / colore ma senza spread o inset. Per le ombre con la forma dei glifi su testo stilizzato (ad es. testo con sfumatura background-clip: text), filter: drop-shadow() sul genitore è lo strumento giusto: box-shadow proietterebbe un'ombra rettangolare dietro i glifi.
Perché la mia ombra 0 0 0 2px non appare morbida?
Perché il terzo valore (blur radius) è 0. Un'ombra solo con spread e senza sfocatura produce un contorno netto e solido, che è esattamente ciò che si vuole per gli anelli di focus e i trucchi del «contorno finto», ma non per un'elevazione morbida. Aggiungere un po' di sfocatura: 0 0 4px 0 rgba(0,0,0,0.2).
Vengono inviati dati a un server?
No. L'anteprima si aggiorna nel browser mentre si trascinano i cursori; la stringa CSS viene generata localmente; la copia scrive negli appunti. La pagina funziona offline una volta caricata.