Generatore ombre CSS
Crea box-shadow CSS con anteprima in tempo reale.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);Cos'è box-shadow nel CSS?
La proprietà box-shadow del CSS permette di aggiungere ombre a qualsiasi elemento HTML. È uno degli strumenti più utilizzati nel web design per creare profondità, elevazione e gerarchia visiva. Le ombre ben applicate fanno sembrare gli elementi come se "galleggiassero" sopra la pagina.
La sintassi include: spostamento orizzontale (X), spostamento verticale (Y), raggio di sfocatura (blur), raggio di estensione (spread), colore e opzionalmente "inset" per ombre interne. Puoi combinare più ombre separandole con virgole.
Domande frequenti
Cos'è la proprietà inset?
Inset converte l'ombra esterna in un'ombra interna. È utile per creare effetti di profondità, campi di testo incassati o pulsanti premuti.
Le ombre influiscono sulle prestazioni?
Ombre semplici hanno un impatto minimo. Tuttavia, ombre con blur molto alto su molti elementi possono influire sulle prestazioni su dispositivi lenti. Usa con moderazione.
Posso usare ombre multiple?
Sì, separale con virgole: box-shadow: 2px 2px 5px rgba(0,0,0,0.1), 0 0 20px rgba(0,0,0,0.05). Questo crea effetti più realistici e sofisticati.
Vuoi saperne di più? Leggi la nostra guida completa →