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.

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