Come si usa
- Scegli una preimpostazione oppure regola offset, sfocatura, espansione, colore e opacità del primo livello.
- Aggiungi altri livelli per ottenere una profondità più naturale oppure seleziona “Inset” per creare un’ombra interna.
- Imposta lo sfondo dell’anteprima e il colore del riquadro in base al tuo design, quindi copia il CSS.
Come funziona
box-shadow accetta, per ogni livello: offset orizzontale, offset verticale, raggio di sfocatura, raggio di espansione e colore, con l’opzione di anteporre inset. Gli offset positivi spostano l’ombra a destra e verso il basso. La sfocatura ammorbidisce i bordi e non può essere negativa; l’espansione allarga (se positiva) o restringe (se negativa) l’ombra prima della sfocatura. I livelli multipli sono separati da virgole e il primo viene disegnato sopra gli altri.
Per ottenere un effetto di profondità realistico, in genere si combina un’ombra piccola e definita con una più ampia e sfumata, a bassa opacità: è ciò che fa la preimpostazione “Elevated”. I colori sono espressi in rgba(), così l’opacità è esplicita. Le ombre seguono il border-radius dell’elemento e non occupano spazio nel layout, quindi non spostano gli altri elementi.
Ombre con valori di sfocatura molto alti applicate a molti elementi possono rallentare lo scorrimento sui telefoni meno potenti. Se animi un’ombra, di solito è più fluido fare apparire gradualmente uno pseudo-elemento che la contiene già, anziché animare direttamente box-shadow.
Esempi
Scheda su sfondo chiaro
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); conferisce a una scheda un bordo definito e un delicato effetto di rilievo.
Contorno di focus senza spostamenti nel layout
Un livello con offset 0, sfocatura 0 ed espansione 3px, nel colore del brand, crea un contorno uniforme attorno a un pulsante. A differenza di un bordo, non modifica le dimensioni dell’elemento.
Campo di input premuto
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) dà a un campo di testo un aspetto leggermente incassato.
Domande frequenti
Qual è la differenza tra box-shadow e filter: drop-shadow()?
box-shadow segue il riquadro e il border-radius dell’elemento e supporta espansione e inset. drop-shadow() segue la forma visibile, comprese le aree trasparenti delle immagini PNG o SVG, ma non supporta espansione né inset.
Perché l’ombra viene tagliata?
Un elemento genitore con overflow: hidden ritaglia tutto ciò che esce dal suo riquadro, ombre comprese. Aggiungi padding al genitore oppure rimuovi la regola overflow.
Quanti livelli dovrei usare?
Per la maggior parte delle interfacce bastano uno o due livelli. Aggiungerne altri può rendere l’ombra più uniforme, ma richiede un po’ più di risorse per il rendering, soprattutto negli elenchi lunghi.
Privacy
Il CSS viene generato nel browser. Non viene caricato né salvato nulla.