Generatore di Box Shadow
Il generatore di box-shadow crea un box-shadow CSS con slider per offset X e Y, sfocatura, espansione, colore, opacità e inset, più preset Material Design e Tailwind, e restituisce il CSS esatto.
Informazioni su questo strumento
Il generatore di box-shadow crea un box-shadow CSS con slider per offset X e Y, sfocatura, espansione, colore, opacità e inset, più preset Material Design e Tailwind, e restituisce il CSS esatto.
Come si usa
- Parti da un preset o lascia Custom.
- Regola offset X/Y, sfocatura, espansione e opacità.
- Scegli il colore dell'ombra e spunta Inset per un'ombra interna.
- Clicca Copy CSS per incollare la regola box-shadow.
Da sapere
- La sintassi di box-shadow è: [inset] offset-x offset-y blur-radius spread-radius color.
- Un raggio di sfocatura più ampio ammorbidisce il bordo; lo spread fa crescere o ridurre l'ombra prima della sfocatura.
- Le ombre scure a bassa opacità (circa 10–25%) sembrano più naturali del nero pieno.
- Si possono sovrapporre più ombre separandole con virgole.
- La parola chiave inset disegna l'ombra all'interno del bordo dell'elemento.
Funziona interamente nel tuo browser: nulla di ciò che inserisci viene caricato o salvato.
Domande frequenti
Come aggiungo un'ombra a un div in CSS?
Usa la proprietà box-shadow, per esempio box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); questo strumento scrive il valore per te.
Che differenza c'è tra blur e spread?
Il blur controlla quanto è morbido il bordo dell'ombra. Lo spread espande o riduce la dimensione dell'ombra prima che venga applicata la sfocatura.
Come si crea un'ombra interna?
Aggiungi la parola chiave inset all'inizio del valore, oppure spunta Inset nello strumento.
Posso usare più box-shadow?
Sì. Separa le ombre con virgole; le ombre sovrapposte, come nei preset Material e Tailwind, risultano più realistiche.