Generatore CSS Box Shadow

Una dichiarazione box-shadow ha sei parti mobili — offset X e Y, blur, spread, colore e la parola chiave opzionale inset — e l'unico modo per azzeccarle è vederle. Questo generatore mette ogni parte su uno slider e mostra il risultato su una card di anteprima mentre trascini, così la riga CSS in fondo è sempre esattamente ciò che stai guardando.

Le ombre nel mondo reale raramente sono a singolo strato. L'elenco dei livelli ti permette di impilare fino a quattro ombre in una sola dichiarazione: una linea scura e stretta per la definizione dei bordi più un'ampia sfumatura morbida per l'elevazione, oppure la coppia chiaro-scuro che definisce il neumorphism. Seleziona un livello per modificarlo, rimuovi quelli che non ti servono e il valore box-shadow combinato 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 dello sfondo dell'anteprima alterna lo sfondo tra chiaro e scuro, così puoi verificare entrambi i temi prima di pubblicare. Le pagine predefinite coprono le varianti che le persone cercano realmente: un'ombra di elevazione morbida, un incavo inset, la ricetta neumorphism a due livelli e una sottile ombra per card.

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