¿Qué CSS necesito para una sombra suave y moderna?.

Una sombra moderna debe sugerir separación, no llamar la atención. La receta habitual es un desplazamiento vertical moderado, mucho desenfoque, poca o ninguna extensión y un color oscuro con baja opacidad.

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

Los dos primeros valores fijan el desplazamiento horizontal y vertical. El desenfoque suaviza el borde. La extensión hace la sombra más grande o pequeña antes del desenfoque; para tarjetas suele ser mejor mantenerla cerca de cero.

Evita los errores comunes

Una sombra negra dura puede hacer que una interfaz limpia parezca anticuada. Un desenfoque enorme puede hacer que las tarjetas parezcan flotar demasiado. Usa más elevación en un modal que en una tarjeta normal.

Usa el Generador de sombras para ajustar los valores visualmente y copiar el CSS. Comprueba el resultado sobre el fondo real y también en el móvil.