Generatore di box-shadow CSS

Crea ombre CSS con anteprima live: offset, blur, spread, colore e opacità. Gratis e senza registrazione.

Come creare un'ombra CSS con box-shadow

La proprietà box-shadow aggiunge un'ombra a qualsiasi elemento HTML. Regola gli slider per l'offset orizzontale e verticale, la sfocatura, l'estensione, il colore e l'opacità: l'anteprima si aggiorna in tempo reale e il codice CSS pronto da copiare compare subito sotto.

Vuoi anche uno sfondo sfumato da abbinare? Prova il generatore di gradienti CSS.

I parametri che definiscono un'ombra CSS

Una box-shadow si definisce con cinque valori: lo spostamento orizzontale, lo spostamento verticale, la sfocatura (blur), l'espansione (spread) e il colore. Regolando questi valori si passa da un'ombra sottile e realistica a un effetto "glow" luminoso o a un bordo colorato solido — piccole variazioni negli stessi cinque numeri producono risultati visivamente molto diversi.

Perché conviene vedere l'anteprima dal vivo

La sintassi CSS delle ombre (box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.2)) non comunica intuitivamente come apparirà il risultato finale. Regolare gli slider e vedere l'effetto aggiornarsi in tempo reale è molto più rapido che modificare i numeri, salvare, e ricaricare la pagina per controllare il risultato in un editor di codice.

Domande frequenti

Come funziona la proprietà CSS box-shadow?
box-shadow accetta offset orizzontale, offset verticale, sfocatura (blur), estensione (spread) e colore: box-shadow: 2px 4px 10px 0px rgba(0,0,0,0.3). Regolando gli slider vedi l'effetto in anteprima e il codice si aggiorna in automatico.
Cosa cambia tra offset, blur e spread?
L'offset sposta l'ombra orizzontalmente e verticalmente rispetto all'elemento. Il blur sfoca i bordi dell'ombra: più è alto, più l'ombra è morbida. Lo spread allarga o restringe l'ombra rispetto alla forma originale dell'elemento.
Cos'è l'ombra interna (inset)?
Attivando l'opzione inset, l'ombra viene disegnata all'interno dell'elemento invece che all'esterno, creando un effetto di incavo spesso usato per input di form o card premute.
Posso usare più ombre sullo stesso elemento?
Sì, box-shadow in CSS accetta valori multipli separati da virgola. Questo strumento genera una singola ombra: per combinarne più di una basta unire manualmente più codici generati separandoli con una virgola.

Quanto è utile questo strumento?

Sii il primo a votare

Tool correlati