Generatore di ombre della casella CSS

Una dichiarazione box-shadow ha sei parti mobili: offset X e Y, sfocatura, diffusione, colore e la parola chiave opzionale inset - e l'unico modo per farle bene è vederle. Questo generatore posiziona ogni parte su un dispositivo di scorrimento e visualizza il risultato su una scheda di anteprima mentre trascini, quindi la linea CSS in basso è sempre esattamente ciò che stai guardando.

Le ombre del mondo reale raramente sono costituite da un unico livello. L'elenco dei livelli ti consente di impilare fino a quattro ombre in un'unica dichiarazione: una linea scura stretta per la definizione dei bordi più un'ampia sfumatura morbida per l'elevazione o la coppia chiaro-scuro che definisce il neumorfismo. Seleziona un livello per modificarlo, rimuovi quelli che non ti servono e il valore combinato box-ombra si aggiorna in tempo reale.

Le ombre si leggono in modo molto diverso sulle interfacce scure, dove un'ombra nera su una pagina quasi nera semplicemente scompare. L'interruttore dell'anteprima dello sfondo cambia lo sfondo tra chiaro e scuro in modo da poter controllare entrambi i temi prima della spedizione. Le pagine preimpostate coprono le varianti che le persone effettivamente cercano: un'ombra morbida in elevazione, un pozzo inserito, la ricetta del neumorfismo a due strati e un'ombra sottile della carta.

Come ogni strumento su questo sito, il generatore è gratuito e funziona interamente nel tuo browser: nessun caricamento, nessun account e continua a funzionare offline una volta caricata la pagina.