Come usare Generatore di box shadow
- 1
Scegli un'ombra di partenza
Clicca una preimpostazione come Morbida, A livelli o Elevazione 2, oppure modifica il livello predefinito.
- 2
Dai forma a ogni livello
Seleziona un livello e imposta scostamento X e Y, sfocatura, espansione, colore, opacità e ombra interna.
- 3
Verifica sulla tua superficie
Cambia le dimensioni del box, il raggio degli angoli e i colori per adattarli all'elemento che stai stilizzando.
- 4
Copia il CSS
Copia la dichiarazione box-shadow o la classe Tailwind e incollala nel tuo codice.
Limiti e Pro
Gratis e senza registrazione: livelli illimitati, scostamenti da −100 a 100 px, sfocatura fino a 200 px e 12 preimpostazioni di ombre.
Pro elimina la pubblicità; l'editor di ombre è completo con ogni piano. Scopri Pro
Informazioni su Generatore di box shadow
La proprietà CSS box-shadow accetta un elenco di livelli, ciascuno con uno scostamento orizzontale e verticale, un raggio di sfocatura, un valore di espansione, un colore e la parola chiave facoltativa inset. Per ottenere una profondità dall'aspetto naturale bisogna bilanciare tutti questi valori su due o più livelli, cosa difficile se modifichi i numeri direttamente nel foglio di stile. Questo editor mostra il risultato su un box di anteprima in tempo reale mentre trascini i cursori, e scrive per te la dichiarazione e una classe Tailwind shadow-[…].
Puoi aggiungere tutti i livelli che vuoi, nasconderne uno temporaneamente per fare un confronto, spostarlo in alto o in basso (il primo livello dell'elenco viene disegnato sopra) oppure impostarlo come interno, per pulsanti premuti e campi di input. Gli scostamenti vanno da −100 a 100 pixel, la sfocatura arriva fino a 200 pixel e l'espansione va da −100 a 100, e ogni colore ha una sua opacità. L'espansione negativa è il trucco delle ombre morbide moderne: ritira l'ombra sotto l'elemento, così sotto di esso resta visibile solo un leggero alone.
Il box di anteprima può essere ridimensionato e avere qualsiasi raggio degli angoli, colore del box e colore di sfondo, così puoi valutare l'ombra sulla superficie reale del tuo design, compresi i temi scuri, dove le ombre richiedono più opacità o un alone colorato.
Sono inclusi dodici punti di partenza: quattro livelli di elevazione Material Design, un'ombra morbida a livello singolo, un'ombra fluida a cinque livelli, uno scostamento netto in stile neubrutalista, il neumorfismo, un'ombra interna, un alone colorato, un contorno in stile focus e una card sospesa. I gradienti si trovano nell'altra scheda; le ombre del testo e il filtro drop-shadow() non sono supportati.
Privacy
L'ombra viene creata e mostrata in anteprima interamente in questa pagina, e i tuoi livelli vengono salvati solo nella memoria locale di questo browser, così restano anche dopo aver ricaricato la pagina. Nessuna impostazione o creazione viene inviata a un server.