Generatore Box Shadow CSS

Cos'è CSS box-shadow?

La proprietà CSS box-shadow aggiunge effetti ombra attorno al bordo di un elemento. Le ombre sono uno strumento fondamentale per creare profondità, elevazione e gerarchia visiva nel web design. Un'ombra ben realizzata può far sembrare che una card flotti sopra la pagina o dare a un pulsante un aspetto premuto.

box-shadow accetta più parametri: offset orizzontale, offset verticale, raggio di sfocatura, raggio di espansione e colore. È anche possibile aggiungere la parola chiave inset per creare ombre interne. Più ombre possono essere sovrapposte su un singolo elemento separandole con virgole, e vengono renderizzate da dietro in avanti.

Analisi della sintassi di box-shadow

La sintassi completa è: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] colore. I valori offset-x e offset-y sono obbligatori e definiscono la posizione dell'ombra rispetto all'elemento. Valori positivi spostano l'ombra a destra e in basso. Il blur-radius ammorbidisce i bordi — un valore di 0 crea un'ombra netta. Lo spread-radius espande o riduce l'ombra — valori negativi creano un'ombra più stretta.

Come usare questo strumento

Regolare i cursori per l'offset orizzontale, l'offset verticale, la sfocatura, l'espansione e il colore. L'anteprima si aggiorna in tempo reale per vedere esattamente come apparirà l'ombra. Attivare l'opzione inset per le ombre interne. Aggiungere più livelli di ombra per effetti di profondità più realistici. Quando si è soddisfatti, copiare il codice CSS generato.

Consigli per ombre efficaci

• Usare ombre sottili con bassa opacità per un aspetto pulito, moderno ed elevato.
• Sovrapporre più ombre per una profondità più realistica — un'ombra vicina e netta più un'ombra diffusa e morbida imita l'illuminazione del mondo reale.
• Una sfocatura maggiore con un leggero offset crea un effetto di levitazione morbida ideale per card e modal.
• L'espansione negativa crea un'ombra più stretta e concentrata utile per bordi sottili.
• Mantenere la direzione dell'ombra coerente in tutta la pagina — sorgenti di luce incoerenti sembrano innaturali.

Sistema di elevazione di Material Design

Il Material Design di Google definisce livelli di elevazione da 0dp a 24dp, ciascuno con valori di ombra specifici. Un'elevazione maggiore significa valori di sfocatura e offset più grandi. Questo sistema garantisce una gerarchia visiva coerente in tutta un'applicazione. Anche senza seguire il Material Design, il principio di usare livelli di elevazione coerenti è prezioso per qualsiasi sistema di design.

Impatto sulle prestazioni

Le ombre box sono accelerate dalla GPU nei browser moderni e hanno un impatto minimo sulle prestazioni per un uso tipico. Tuttavia, raggi di sfocatura molto grandi (50px+) su molti elementi contemporaneamente possono causare cali di frame rate durante le animazioni. Se è necessario animare le ombre, considerare l'uso di transform: scale() per espandere uno pseudo-elemento con un'ombra statica invece di animare direttamente i valori dell'ombra.

Domande frequenti

Qual è la differenza tra box-shadow e drop-shadow?

box-shadow si applica al box rettangolare dell'elemento, inclusi padding e bordo. La funzione filter: drop-shadow() segue la forma effettiva dell'elemento, comprese le regioni trasparenti nelle immagini. Usare drop-shadow per elementi non rettangolari come icone o immagini PNG con trasparenza.

Posso usare box-shadow per creare bordi?

Sì. Un box-shadow con zero sfocatura e un'espansione positiva si comporta come un bordo che non influisce sul layout. Questa tecnica è utile quando si ha bisogno di un bordo visivo senza cambiare le dimensioni dell'elemento, ad esempio durante gli stati hover.