Genera box-shadow CSS con anteprima in tempo reale. Aggiungi più livelli per profondità e realismo, poi copia il CSS.
Regola i cursori per offset orizzontale/verticale, sfocatura, spread, colore e opacità di un box-shadow CSS. Seleziona Inset per un’ombra interna. L’anteprima si aggiorna dal vivo e il CSS generato è pronto da copiare nel foglio di stile.
Usa i cursori per ogni parametro. Seleziona Inset per ombra interna. Clicca il campione colore per cambiarlo. Il CSS si aggiorna dal vivo nel blocco scuro — clicca Copia per copiarlo.
Le ombre sono uno dei modi più rapidi per far capire a un utente cosa sta sopra la pagina, cosa può essere premuto e cosa deve sembrare separato dallo sfondo. In pratica, il punto non è scrivere a memoria la sintassi di box-shadow. Il punto è trovare un trattamento della profondità che si adatti al componente, allo sfondo e al resto dell’interfaccia.
Questo strumento trasforma quella ricerca in un processo visibile di regolazione invece che in tentativi alla cieca basati sui numeri.
Questo strumento è utile perché trasforma quei tentativi in un processo visibile di regolazione.
Un’ombra ben dosata può sollevare un pannello quanto basta per farlo leggere come un proprio livello.
Alcuni controlli hanno bisogno di profondità per sembrare azionabili. Troppo poca e sembrano piatti; troppa e diventano pesanti o datati.
Una UI flottante ha bisogno di separarsi visivamente dal contenuto dietro. Le ombre sono uno dei modi più semplici per creare questa distinzione.
Se un componente ha bisogno di un’ombra enorme per farsi notare, il problema potrebbe essere più nella gerarchia del layout che nell’ombra.
Le ombre pesanti rendono rapidamente l’interfaccia fangosa. Piccoli aumenti spesso hanno un effetto visivo più grande del previsto.
La stessa ombra che funziona su una pagina bianca può apparire del tutto sbagliata su una superficie scura o visivamente affollata.
È un buon caso d’uso perché piccole differenze visive contano e spesso serve qualcosa di più sottile di ciò che scriveresti a memoria.
Le ombre inset sono utili quando un campo o un controllo deve sembrare rientrato invece che sollevato.
Se un team usa già uno stile di ombra preciso, un generatore facilita il riuso del valore esatto invece di andare a occhio.
Questo strumento genera CSS per le ombre. Non decide se un componente debba stare su un livello più alto, se l’intero sistema visivo sia equilibrato o se l’effetto sia appropriato in ogni contesto. Aiuta con l’ombra, non con tutta la gerarchia dell’interfaccia.
Le ombre sono uno di quei dettagli che le persone notano solo quando “suonano” sbagliati. Un generatore aiuta ad arrivare prima a qualcosa che “sembra giusto”, con meno ritocchi arbitrari.
Lo spread aumenta (valore positivo) o diminuisce (valore negativo) la dimensione complessiva dell'ombra. Uno spread positivo rende l'ombra più grande dell'elemento stesso; uno negativo la rende più piccola.
Anche se questo strumento semplice ne genera una, il CSS supporta più valori separati da virgola per box-shadow per creare effetti complessi a più livelli.
Questo strumento gira interamente nel tuo browser. Nulla di ciò che digiti o incolli viene inviato a un server — tutta l'elaborazione avviene localmente sul tuo dispositivo.