Quel CSS faut-il pour une ombre douce et moderne ?.

Une ombre moderne doit suggérer une séparation, pas se faire remarquer. La recette habituelle est un léger décalage vertical, un flou généreux, peu ou pas d’étendue et une couleur sombre peu opaque.

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

Les deux premières valeurs définissent les décalages. Le flou adoucit le bord. L’étendue agrandit ou réduit l’ombre avant le flou ; pour les cartes, mieux vaut souvent la garder proche de zéro.

Évitez les erreurs courantes

Une ombre noire dure peut dater une interface épurée. Un flou énorme peut faire flotter les cartes trop haut. Une modale mérite davantage d’élévation qu’une carte ordinaire.

Utilisez le Générateur d’ombres pour régler les valeurs visuellement et copier le CSS. Vérifiez le résultat sur le vrai fond et sur mobile.