In questo articolo
Cos'è CSS box-shadow?
La proprietà CSS box-shadow aggiunge effetti ombra intorno al riquadro di un elemento. È una delle proprietà CSS più utilizzate per creare profondità e gerarchia visiva nel web design. Una singola dichiarazione box-shadow può includere offset orizzontale e verticale, raggio di sfocatura, raggio di espansione e colore.
Le ombre possono essere stratificate — puoi applicare più ombre a un singolo elemento separandole con virgole. Questa tecnica consente effetti sofisticati come profondità realistica, bordi luminosi e design neumorfici. La parola chiave inset inverte l'ombra all'interno dell'elemento per effetti di pressione o incassati.
Come funziona il nostro generatore
Il generatore di box-shadow di CheckTown fornisce un'interfaccia visuale per creare ombre CSS. Regola gli slider, visualizza il risultato in tempo reale e copia il CSS quando sei soddisfatto dell'effetto.
- Regola l'offset X, l'offset Y, il raggio di sfocatura e il raggio di espansione con slider intuitivi
- Scegli il colore dell'ombra con controllo dell'opacità, attiva la modalità inset e sovrapponi più ombre
- Parti da preset come Sottile, Medio, Grande o Bagliore — poi personalizza per adattarlo al tuo design
Prova gratuitamente — nessuna registrazione richiesta
Crea un'ombra →Quando usare le ombre di box
Le ombre di box sono essenziali per creare profondità e gerarchia visiva nelle interfacce web moderne. Guidano lo sguardo dell'utente e comunicano interattività.
- Elevazione di card e pannelli — ombre sottili sollevano le card dallo sfondo per creare un'interfaccia a livelli
- Stati dei pulsanti — aggiungi o approfondisci le ombre all'hover per indicare interattività e fornire feedback tattile
- Modali e dropdown overlay — ombre prominenti separano gli elementi fluttuanti dalla pagina sottostante
Domande frequenti
Il box-shadow influisce sul layout o sulle prestazioni?
Le ombre di box non influiscono sul layout — sono puramente visive e non cambiano le dimensioni o la posizione dell'elemento nel flusso del documento. Le prestazioni sono generalmente eccellenti nei browser moderni, ma raggi di sfocatura molto grandi o molte ombre stratificate su elementi ridisegnati frequentemente possono impattare la velocità di rendering.
Si può animare box-shadow?
Sì, box-shadow può essere animato con transizioni CSS e keyframes. Tuttavia, animare box-shadow attiva ridisegnamenti, che possono essere costosi. Per prestazioni migliori, considera di animare l'opacità su un pseudo-elemento con un'ombra fissa invece di transizionare i valori dell'ombra stessi.
Qual è la differenza tra box-shadow e drop-shadow?
box-shadow applica un'ombra rettangolare al box dell'elemento (incluso il suo border-radius). filter: drop-shadow() applica un'ombra che segue la forma effettiva dell'elemento, incluse le aree trasparenti nelle immagini. Usa box-shadow per elementi UI e drop-shadow per immagini con trasparenza.