Generatore Box Shadow CSS Gratis: Ombra di Riquadro Visuale Online
99 utilizzi5px
5px
15px
0px
30%
Consigli Box Shadow
Regolare visivamente
Controlli per X, Y, blur, spread e colore. Anteprima in tempo reale.
Copiare CSS
Codice generato automaticamente. Copia con un clic.
Ombra interna (inset)
Attiva inset per ombra interna.
Domande Frequenti
Come creare ombra CSS?
Regola controlli: offset, blur, spread, colore. Aggiornamento in tempo reale.
Cos'è inset?
Ombra verso l'interno del riquadro.
Posso copiare?
Sì, codice CSS con un clic.
Posso animare le transizioni dell'ombra senza lag?
Sì, ma solo se animi opacità o colore. Spostare offset o sfocatura costringe il browser a ricalcolare il layout a ogni frame. Sul mobile è un disastro per le prestazioni. Usa transizioni sull'opacità o un pseudo-elemento per movimenti più fluidi. Verifica l'effetto con l'anteprima live del generatore prima di implementarlo.
Posso usare più ombre su un singolo elemento?
Certo, separale con virgole nel generatore. Clicca su "Aggiungi ombra" per creare un nuovo livello. Due ombre con offset diversi simulano una carta sollevata — una morbida e profonda, l’altra più netta. L’anteprima live mostra tutti i livelli in tempo reale.
C'è differenza tra box-shadow e filter: drop-shadow?
Sì, non sono affatto intercambiabili. box-shadow crea un rettangolo attorno al box dell'elemento — angoli compresi. filter: drop-shadow segue invece la forma effettiva del contenuto. Una PNG trasparente con bordi irregolari ottiene un'ombra perfettamente sagomata. Usa box-shadow per card, pulsanti e componenti UI. Ricorri a drop-shadow per loghi o immagini ritagliate. Prova qui: applica box-shadow a un elemento circolare, poi passa a drop-shadow nel tuo CSS. La differenza la vedi all'istante.
Come Usare
- Regola offset X e Y
- Configura blur e spread
- Scegli colore
- Attiva inset
- Copia CSS