De Que CSS Preciso para uma Sombra Suave e Moderna?.

Uma sombra moderna deve sugerir separação, não anunciar-se. A receita normal é um deslocamento vertical moderado, bastante desfoque, pouca expansão e uma cor escura com baixa opacidade.

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

Os dois primeiros valores definem os deslocamentos. O desfoque suaviza a borda. A expansão aumenta ou reduz a sombra antes do desfoque; nas caixas costuma ser melhor mantê-la perto de zero.

Evite erros comuns

Uma sombra preta dura pode envelhecer uma interface limpa. Um desfoque enorme pode fazer os cartões parecerem flutuar demasiado. Um modal merece mais elevação do que um cartão comum.

Use o Gerador de Sombras para ajustar os valores visualmente e copiar o CSS. Verifique o resultado no fundo real e no telemóvel.