Quale CSS serve per un'ombra morbida e moderna?.

Un’ombra moderna deve suggerire separazione, non farsi notare. La ricetta tipica è un modesto offset verticale, una sfocatura generosa, poca espansione e un colore scuro poco opaco.

box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

I primi due valori impostano gli offset. La sfocatura rende morbido il bordo. L’espansione rende l’ombra più grande o piccola prima della sfocatura; per le schede è meglio tenerla vicino a zero.

Evita gli errori comuni

Un’ombra nera netta può far sembrare datata un’interfaccia pulita. Una sfocatura enorme fa galleggiare troppo le schede. Una modale merita più elevazione di una scheda normale.

Usa il Generatore di Ombre per regolare i valori visivamente e copiare il CSS. Controlla il risultato sullo sfondo reale e su mobile.