Italiano
Crea box-shadow CSS multilivello con anteprima dal vivo e copia CSS pronto per la produzione.
Ultimo aggiornamento
Coddy ti insegna facendoti scrivere codice vero nel browser: lezioni interattive, feedback immediato e aiuto dall'AI quando ti blocchi.
box-shadow è la proprietà CSS che aggiunge ombre esterne, bagliori e incavi interni a qualsiasi elemento. È la leva più potente per dare a un design piatto un senso di *elevazione*: le card si staccano dalla pagina, i modali fluttuano sopra il contenuto, i pulsanti sembrano premibili.
Il trucco è che un'ombra *fatta bene* raramente è un solo livello. Le ombre reali sono più morbide e hanno un rimbalzo di luce ambientale: la maggior parte dei design system (Material, iOS, Tailwind) sovrappone 2 o 3 dichiarazioni box-shadow con offset e opacità diversi. Scriverle a mano è una seccatura; un generatore ti permette di regolare ogni livello a colpo d'occhio e vedere il risultato combinato dal vivo.
Il generatore di Coddy supporta livelli illimitati, ombre sia *esterne* sia *inset*, colore e opacità per ogni livello e preset che coprono gli schemi più comuni: card discrete, ombre nette, bagliori di brand, incavi interni e superfici neumorfiche. Copia il CSS e incollalo direttamente nel tuo foglio di stile: niente upload, niente account, niente watermark.
box-shadow: [inset] <x> <y> <blur> <spread> <color>. inset mette l'ombra *dentro* l'elemento; senza, l'ombra cade all'esterno.rgba() (o hsla()) per il colore, così puoi regolare l'opacità di ogni livello. Il nero puro a bassa opacità appare come un'ombra grigia morbida; il nero puro a opacità piena appare come un ritaglio netto.box-shadow viene composto dalla GPU ed è uno dei miglioramenti visivi più economici che puoi applicare. Non influisce sul layout: l'elemento mantiene dimensioni e posizione originali.Scegli un preset che corrisponda all'effetto che vuoi: card discreta, elevazione morbida, ombra netta, bagliore di brand, incavo interno o neumorfico. I preset sono buoni punti di partenza da rifinire.
Trascina gli slider per offset X/Y, blur, spread, colore e opacità. L'anteprima a sinistra si aggiorna dal vivo. Opacità più bassa e blur più alto danno ombre *più morbide*.
Clicca *Aggiungi livello* per sovrapporre una seconda ombra. La profondità realistica usa quasi sempre due livelli: uno corto e stretto (l'ombra di contatto) e uno lungo e morbido (l'ombra ambientale).
Attivando *Inset* l'ombra viene disegnata dentro l'elemento invece che intorno. Combinala con una leggera ombra esterna per l'effetto di un pulsante premuto.
Quando l'anteprima corrisponde al tuo design, clicca *Copia CSS*. Incolla il risultato nel tuo foglio di stile: la regola generata include tutti i livelli attivi.
Ogni valore di box-shadow: x y blur spread color e il ruolo che svolge.
| Valore | Effetto | Intervallo tipico |
|---|---|---|
| X offset | Sposta l'ombra in orizzontale; positivo = a destra | da −40px a 40px |
| Y offset | Sposta l'ombra in verticale; positivo = in basso | da 0px a 40px per una luce naturale |
| Blur | Ammorbidisce il bordo dell'ombra | da 0px a 80px |
| Spread | Ingrandisce o rimpicciolisce prima del blur | da −30px a 30px |
| Colore | Qualsiasi colore CSS, ma rgba() ti permette di regolare l'opacità di ogni livello | rgba(0,0,0,0.05–0.3) per ombre naturali |
inset | Disegna l'ombra dentro l'elemento | - |
| Più livelli | Separati da virgole; si impilano dal fondo verso il primo piano | 2 o 3 livelli danno una profondità realistica |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);Un'ombra stretta e poco sfocata definisce il punto di contatto, e un'ombra più lunga e morbida dà l'impressione della luce ambientale. È lo schema usato dalla maggior parte dei design system moderni.
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);Imposta X e Y a zero così il bagliore si irradia in modo uniforme. Un piccolo spread positivo ispessisce il bagliore prima che il blur lo ammorbidisca. Usalo con moderazione: i bagliori colorati attirano molta attenzione.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);Le ombre inset vengono disegnate dentro l'elemento. Un'ombra morbida dà l'impressione di un incavo; un inset sottilissimo aggiunge un leggero bordo interno per definire la forma.
filter: drop-shadow() e box-shadow come se fossero intercambiabili. drop-shadow() segue la maschera alfa di un SVG o di un'immagine, utile per le forme irregolari, ma box-shadow è più veloce e pulito per gli elementi rettangolari.box-shadow ignora overflow: hidden sull'elemento stesso. Se è il genitore ad avere overflow: hidden, l'ombra viene tagliata.box-shadow?box-shadow: x y blur spread color. I primi due sono gli offset; il *blur* ammorbidisce il bordo; lo *spread* cambia la dimensione prima del blur; il colore è qualsiasi colore CSS (usa rgba() per controllare l'opacità). Aggiungi inset all'inizio per mettere l'ombra dentro l'elemento.box-shadow e filter: drop-shadow()?box-shadow segue il rettangolo di ingombro dell'elemento ed è veloce da disegnare. drop-shadow() segue il canale alfa di ciò a cui viene applicato (ottimo per SVG e PNG trasparenti) ma costa di più da renderizzare. Usa box-shadow per card e pulsanti; usa drop-shadow() per le forme irregolari.transform: scale() da qualche parte più in alto nell'albero.box-shadow influisce sul layout?overflow: visible.