Generatore di box-shadow CSS
Progetta ombre realistiche sovrapponendo più livelli, come fanno i migliori design system. Regola offset, sfocatura, espansione, colore e opacità di ogni livello e copia il risultato in CSS o come classe Tailwind.
Elaborato al 100% nel tuo browser
Ctrl + Enter eseguiCtrl + C copia risultato
Come si usa
- 1Parti da uno stile (morbida, elevazione, fluttuante…) o da zero.
- 2Seleziona un livello e regola offset, sfocatura, espansione, colore e opacità.
- 3Aggiungi livelli con «+» per ombre più naturali, oppure spunta «inset» per un’ombra interna.
- 4Cambia colore del box, sfondo e raggio, poi copia il CSS o la classe Tailwind.
Casi d’uso
- Card, menu a tendina e modali con profondità realistica.
- Stati hover ed elevazione per i pulsanti.
- Stili brutalisti con ombre nette o effetti bagliore.
- Campi dei moduli con ombra interna.
Domande frequenti
Come funziona la proprietà box-shadow?
Accetta offset orizzontale e verticale, sfocatura, espansione e colore, più la parola chiave facoltativa inset. Puoi concatenare più ombre separate da virgole; la prima viene disegnata sopra.
Perché usare più livelli?
Le ombre reali hanno una zona netta vicino all’oggetto e una diffusa più lontano. Sovrapporre livelli con sfocature diverse e bassa opacità imita questo comportamento e risulta molto più naturale.
A cosa serve il valore di espansione (spread)?
Ingrandisce (valori positivi) o rimpicciolisce (valori negativi) l’ombra prima di sfocarla. Uno spread negativo con molta sfocatura crea ombre morbide che non sporgono dai lati.
Come la uso in Tailwind CSS?
Scegli la scheda Tailwind e copia la classe con valore arbitrario, ad esempio shadow-[0px_10px_30px_-5px_rgba(0,0,0,0.2)]. Funziona in Tailwind v3 e v4 senza configurazione aggiuntiva.