Un article très complet sur les ombres en CSS. En résumé :

• Chaque élément de la page doit être éclairé depuis la même source de lumière globale
• La propriété box-shadow représente la position de la source de lumière, en utilisant un décalage horizontal et vertical. Pour assurer la cohérence, chaque ombre devrait utiliser le même ratio entre ces deux nombres.
• Plus l'élément est proche de l'utilisateur, plus le décalage et le rayon de flou devraient augmenter, et plus l'opacité de l'ombre devrait diminuer.

Quelques astuces :

• Créer un environnement uni en coordonnant nos ombres
• Utiliser les couches pour créer des ombres plus réalistes (cf https://shadows.brumm.af/ )
• Déformer les couleurs pour éviter l'effet "délavé" des ombres grises