Generatore di Box Shadow CSS – Ombre a Livelli, Interne e Morbide

Come usare Generatore di Box Shadow

1Parti da un preset come Morbida, A livelli o Interna, oppure regola l'ombra predefinita.

2Trascina gli slider per offset orizzontale e verticale, sfocatura, espansione e opacità, e scegli il colore dell'ombra.

3Aggiungi più livelli per una profondità realistica e imposta il raggio dei bordi e i colori dell'anteprima.

4Copia il CSS e incollalo nel tuo foglio di stile.

Crea ombre CSS visivamente

Le ombre danno profondità alle interfacce: sollevano le card dalla pagina, mostrano quale pulsante è premuto e separano una finestra di dialogo dal contenuto sottostante. La proprietà CSS box-shadow è potente, ma i suoi cinque valori numerici sono difficili da regolare alla cieca. Questo generatore ti offre slider e un'anteprima in tempo reale, ti permette di sovrapporre più ombre per un aspetto naturale e genera codice CSS pulito da incollare direttamente nel tuo progetto.

Funzionalità

Controlli per offset, sfocatura, espansione, colore e opacità con anteprima istantanea.
Fino a cinque livelli combinati in un'unica dichiarazione box-shadow.
Ombre interne (inset) per effetti premuti e incavati.
Raggio degli angoli e colori di anteprima per adattarsi al tuo design.
Preset per ombre morbide, medie, nette, stratificate, interne ed effetti bagliore (glow).
CSS pronto da copiare con colori in formato rgba().

Esempio

Un'ombra stratificata che appare naturale su sfondi chiari:

.card {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
    0px 4px 8px 0px rgba(0, 0, 0, 0.07),
    0px 16px 32px 0px rgba(0, 0, 0, 0.07);
  border-radius: 16px;
}

Consigli per il design delle ombre

Obiettivo	Impostazioni consigliate
Card delicata su bianco	y 4, blur 12, opacità 8%
Dropdown o modale fluttuante	2–3 livelli, y fino a 24, blur fino a 48, opacità 7–12% ciascuno
Stile "flat" retrò	x 6, y 6, blur 0, opacità 100%
Effetto focus o bagliore	x 0, y 0, blur 16–24, spread 2–4, colore del brand
Campo di input premuto	inset, y 2, blur 6, opacità 25–30%

Mantieni coerente la sorgente luminosa: se le ombre cadono verso il basso su un componente, dovrebbero cadere verso il basso ovunque.

Strumenti correlati

Crea lo sfondo per le tue card con il Generatore di gradienti CSS, converti i colori tra HEX, RGB e HSL con il Convertitore di colori, oppure estrai i colori da uno screenshot con il Color Picker da immagine.

Domande frequenti

Cosa significano i quattro valori di box-shadow?

In ordine, sono l'offset orizzontale (un valore positivo sposta l'ombra a destra), l'offset verticale (positivo la sposta in basso), il raggio di sfocatura (più alto è, più è morbida) e l'espansione (positivo rende l'ombra più grande dell'elemento, negativo più piccola). Il colore va per ultimo.

Perché usare più livelli di ombra?

Le ombre reali sono nitide e scure vicino all'oggetto, morbide e tenui più lontano. Sovrapporre due o tre ombre con offset e sfocatura crescenti ma bassa opacità imita questo effetto e risulta molto più naturale rispetto a una singola ombra marcata.

Cos'è un'ombra interna (inset)?

Un'ombra interna viene disegnata all'interno dell'elemento anziché all'esterno, dando un effetto incavato. È spesso usata per campi di input, pulsanti premuti e riquadri.

Perché la mia ombra sembra grigia su uno sfondo colorato?

Le ombre nere risultano spente sulle superfici colorate. Usa una tonalità più scura del colore di sfondo invece del nero puro: l'effetto sarà più ricco e naturale.

I box-shadow influiscono sulle prestazioni?

Qualche ombra non pesa sulle prestazioni. Tuttavia, raggi di sfocatura molto ampi su molti elementi, o l'animazione di box-shadow allo scroll, possono rallentare il rendering sui telefoni di fascia bassa. Per animare un'ombra, è meglio animare l'opacità di uno pseudo-elemento che contiene l'ombra.