Generatore di box-shadow

Come usare il generatore di box-shadow

1. Parti da un modello o tieni l’ombra predefinita Morbida. La riga Modelli offre Morbida, Netta, A strati, Elevazione, Neumorphism, Interna e Bagliore.
2. In Livelli d’ombra, clicca su un livello per selezionarlo. Puoi spostare ogni livello con Sposta su e Sposta giù, o eliminarlo con Rimuovi. Aggiungi livello duplica il livello selezionato, così puoi ritoccarne una copia.
3. Modifica il livello selezionato in Modifica il livello selezionato: trascina il punto nel riquadro Spostamento oppure usa i cursori e i campi numerici di Spostamento orizzontale (px), Spostamento verticale (px), Sfocatura (px) ed Espansione (px).
4. Scegli un Colore dell’ombra con il selettore o scrivi un qualsiasi colore CSS nel campo del codice, poi imposta l’Opacità (%). Spunta Inset (ombra interna) per disegnare l’ombra all’interno del riquadro.
5. Regola le Impostazioni anteprima (Colore del riquadro, Colore di sfondo, Raggio degli angoli (px)) per vedere l’ombra con i tuoi colori reali. Influiscono solo sull’anteprima.
6. Copia la dichiarazione da Codice CSS con Copia.

Da tastiera: seleziona il punto nel riquadro Spostamento e usa i tasti freccia per muoverlo di 1 px, o di 10 px con Maiusc.

Come funziona box-shadow

La sintassi di un’ombra è box-shadow: [inset] x y blur spread color.

• x e y spostano l’ombra a destra e in basso. I valori negativi la spostano a sinistra e in alto. Una fonte di luce sopra l’elemento corrisponde a una y positiva.
• La sfocatura (blur) ammorbidisce il bordo e non può essere negativa. Con una sfocatura di 0 ottieni una copia del riquadro dai bordi netti.
• L’espansione (spread) ingrandisce (valore positivo) o riduce (negativo) l’ombra prima della sfocatura. Un’espansione negativa con una y grande tiene l’ombra sotto l’elemento invece che tutto intorno.
• Il colore di solito include una trasparenza. Lo strumento scrive i colori opachi in HEX e quelli traslucidi in rgba(), che ogni browser comprende. Se inserisci un colore che ha già un canale alfa, l’Opacità (%) lo moltiplica.
• inset porta l’ombra dentro il bordo, come se il riquadro fosse premuto nella pagina.

L’ombra segue il border-radius dell’elemento e non modifica mai il layout: non occupa spazio e non fa comparire barre di scorrimento.

Perché sovrapporre più ombre?

Le ombre reali non sono un unico rettangolo sfocato. Un’ombra piccola, scura e compatta sta proprio sotto l’oggetto, mentre una grande, tenue e sfocata si allarga più lontano. Sovrapporre da due a cinque livelli imita questo effetto ed è molto più naturale di una sola ombra pesante. Il modello A strati raddoppia spostamento e sfocatura a ogni passo con un’opacità bassa, una tecnica resa popolare da molti design system. Elevazione riproduce le ombre a tre livelli del Material Design.

Il primo livello dell’elenco viene disegnato sopra gli altri, esattamente come nel valore CSS. L’ordine conta soprattutto quando mescoli ombre interne ed esterne o usi colori intensi.

Neumorphism

Il neumorphism (“soft UI”) usa due ombre su un elemento dello stesso colore dello sfondo: una scura spostata in basso a destra e una chiara spostata in alto a sinistra. Il modello Neumorphism imposta entrambi i colori a #e0e5ec. Tieni presente che questo stile ha un contrasto basso: i pulsanti realizzati così hanno bisogno di uno stato di focus ben visibile e di etichette leggibili.