Generatore Box Shadow CSS Online
Crea ombre CSS con anteprima in tempo reale. Piu livelli, inset, blur e spread.
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);
Perche usarlo
Ombre CSS perfette senza indovinare i valori
Anteprima istantanea
Regola offset, blur, spread e colore con i cursori. I risultati sono immediati.
Piu livelli
Combina le ombre per effetti realistici. Aggiungi o rimuovi livelli facilmente.
Ombre inset
Passa da ombre esterne a interne con un solo clic.
Nessuna installazione
Tutto nel browser. Nessun tool di design esterno richiesto.
Come funziona
Tre passaggi, senza complicazioni
Configura la tua ombra
Regola offset X, offset Y, blur radius, spread radius e colore con i controlli visivi. Attiva inset per le ombre interne.
Aggiungi piu ombre
La proprieta box-shadow accetta piu ombre separate da virgola. Combina i livelli per creare effetti di elevazione o profondita realistici.
Copia il CSS
Il codice box-shadow viene generato in tempo reale. Copia la proprieta completa pronta per il tuo foglio di stile.
FAQ
Hai delle domande?
Si. La proprieta box-shadow accetta un elenco separato da virgole: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). Le ombre vengono renderizzate nell'ordine in cui appaiono: la prima appare in cima. Questo e essenziale per ombre multi-livello realistiche, seguendo il principio che le ombre naturali hanno una componente umbra (scura e nitida) e una componente penombra (diffusa e ampia).
La parola chiave inset trasforma l'ombra da esterna a interna. Invece di proiettarsi verso l'esterno dell'elemento, l'ombra appare all'interno dei suoi bordi, creando l'illusione che l'elemento sia incavato o premuto. Viene usata per simulare pulsanti premuti, campi di input attivi ed effetti di rilievo invertito (come nel design neumorfic).
Le box-shadow vengono renderizzate durante la fase di paint del browser e possono causare repaint costosi quando vengono animate. A differenza di transform e opacity (che operano nel compositor layer senza repaint), animare box-shadow puo causare cali di frame rate. Il team di Chrome raccomanda di usare filter: drop-shadow() per gli elementi che necessitano di ombre animate, o di usare pseudo-elementi con opacita animata per simulare l'effetto con prestazioni migliori.
text-shadow si applica solo al testo renderizzato, seguendo i contorni di ogni glifo. box-shadow si applica al box model dell'elemento (border-box), ignorando completamente il contenuto. Applicare box-shadow a uno span di testo produce un'ombra rettangolare (o arrotondata se l'elemento ha border-radius). Per un'ombra che segua la forma esatta del contenuto (incluso testo trasparente o immagini), usa filter: drop-shadow().
Le ombre realistiche combinano almeno due livelli: un'ombra ad alta opacita e piccolo blur per l'umbra, e un'ombra a bassa opacita e grande blur per la penombra. Il sistema di elevazione di Material Design di Google definisce 24 livelli di elevazione, ciascuno con valori box-shadow specifici. Ad esempio, l'elevazione 8 (schede flottanti) usa: box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12).
CSS box-shadow: rendering, neumorfismo ed elevazione in Material Design
La proprieta box-shadow fu introdotta in CSS3 (modulo Backgrounds and Borders, W3C) e raggiunge il pieno supporto senza prefissi vendor nel 2012. Prima di CSS3, gli sviluppatori simulavano le ombre con immagini PNG a 9 segmenti (nine-patch), una tecnica costosa in termini di banda e manutenzione. La sintassi di box-shadow definisce, nell'ordine: offset-x, offset-y, blur-radius, spread-radius e color, con la parola chiave opzionale inset. Il parametro spread e esclusivo di box-shadow e non ha equivalente in filter: drop-shadow() ne in text-shadow.
Il rendering delle ombre nei browser moderni utilizza i compositor layer. Quando un elemento ha box-shadow, il browser lo promuove al proprio paint layer per renderizzare l'ombra in modo indipendente. Questo ha implicazioni sulla memoria GPU: ogni livello aggiuntivo consuma VRAM. Su dispositivi con VRAM limitata (mobile di fascia bassa), un uso eccessivo di box-shadow puo causare cali di frame rate. L'alternativa filter: drop-shadow() utilizza la pipeline CSS filter, che in Chrome viene elaborata dalla GPU in modo piu efficiente, sebbene il suo comportamento differisca sugli elementi con border-radius.
Il neumorfismo, la tendenza di design UI diventata virale a dicembre 2019 dopo un post su Dribbble di Alexander Plyuto, si basa esclusivamente su box-shadow per creare l'illusione di elementi estrusi dallo sfondo. La ricetta tipica combina due ombre: una chiara (offset positivo, come se la luce venisse dall'alto a sinistra) e una scura (offset negativo). Il sistema di elevazione di Material Design di Google, documentato su material.io, definisce 24 livelli di elevazione con valori di box-shadow calcolati matematicamente per simulare in modo coerente la luce ambiente e diretta su tutta l'interfaccia.