Come costruire un’ombra CSS (Box Shadow) con anteprima live
Pubblicato il 14 settembre 2026 · 2 min di lettura
Ottenere che offset, sfocatura, diffusione e colore di un box-shadow appaiano giusti di solito significa modificare CSS e aggiornare ripetutamente una scheda del browser. Questo strumento ti dà cursori e un’anteprima live così puoi vedere l’effetto esatto prima di copiare il CSS.
Prova Generatore di ombre CSSPassaggi
- 1
Apri il Generatore CSS Box Shadow
Vai al generatore di box-shadow.
- 2
Scegli un preset o inizia personalizzato
Scegli un preset in stile Tailwind, o regola tu stesso offset, sfocatura, diffusione e colore.
- 3
Aggiungi un secondo livello d’ombra (opzionale)
Sovrapponi una seconda ombra per maggiore profondità, come spesso usano i design system.
- 4
Copia il CSS
Incolla la regola box-shadow generata direttamente nel tuo foglio di stile.
Domande frequenti
Sì — attiva la modalità inset per ottenere un’ombra che appare all’interno del bordo dell’elemento invece che all’esterno.
Sì — abilita un secondo livello d’ombra per un effetto di profondità più sfumato e stratificato, una tecnica comune nei design system moderni.
Sì — l’anteprima renderizza la proprietà CSS box-shadow effettiva, quindi ciò che vedi è esattamente ciò che otterrai quando incolli il codice.
Poiché l’anteprima si aggiorna live mentre regoli ogni cursore, puoi affinare un’ombra fino a farla apparire esattamente giusta prima ancora di toccare il tuo foglio di stile.