Card Shadow CSS: sottile codice box-shadow
Costruisci visivamente il codice box-shadow CSS: cursori per offset, sfocatura, diffusione, colore con opacità, modalità inserita e fino a quattro livelli con un'anteprima dal vivo.
Risultato
Questa pagina apre il generatore di ombre box preimpostato su un'ombra classica della carta: 2px verso il basso, sfocatura di 8px, 15% di opacità del nero. È volutamente silenzioso – abbastanza da separare una carta dalla pagina senza annunciarsi – e l'anteprima mostra esattamente quanto silenzioso.
Questo intervallo corrisponde ai gradini di elevazione più bassi nella maggior parte dei sistemi di progettazione: schede elenco, menu a discesa, popover e righe di tabella al passaggio del mouse. Se hai bisogno di un sollevamento più forte per modali o pannelli mobili, aumenta l'offset Y e la sfocatura insieme: dovrebbero crescere in proporzione per mantenere credibile la fonte di luce.
Copia la linea dell'ombra del riquadro negli stili del componente o duplicala come secondo livello con una sfocatura più stretta per aggiungere definizione ai bordi. Lo strumento è gratuito e funziona interamente nel tuo browser.