Generatore di ombre CSS (box-shadow)

Muovi i controlli e guarda subito l'ombra di un riquadro, una card o un pulsante. Combina più livelli per ombre più realistiche o parti da uno degli esempi, e copia il codice box-shadow per il tuo CSS.

Come funziona box-shadow

La proprietà box-shadow accetta fino a quattro misure e un colore: spostamento orizzontale e verticale (negativi verso sinistra e verso l'alto), sfocatura (0 = bordo netto), espansione (ingrandisce o, se negativa, rimpicciolisce l'ombra) e il colore, di solito nero con trasparenza (rgba(0, 0, 0, 0.2)). Con la parola inset l'ombra viene disegnata dentro il riquadro.

Si possono concatenare più ombre separate da virgole. Le ombre più realistiche combinano un'ombra corta e netta con un'altra più grande e diffusa, come fanno Material Design e la maggior parte dei design system.

Trucchi con box-shadow

Un'ombra senza spostamento né sfocatura e con espansione (0 0 0 4px) disegna un contorno che non occupa spazio, ideale per il focus di pulsanti e campi. Il neumorfismo usa due ombre opposte, una chiara e una scura, su uno sfondo dello stesso colore del riquadro.

Le ombre non influiscono sull'impaginazione né sulle dimensioni dell'elemento, ma ombre molto grandi e diffuse su molti elementi possono rallentare lo scorrimento sui cellulari. Per ombreggiare la sagoma di un PNG trasparente usa filter: drop-shadow() e per i testi text-shadow.