La propriété CSS box-shadow peint une ou plusieurs ombres autour d’un élément sans modifier la mise en page. ShadowStack expose uniquement les valeurs présentes dans la déclaration copiée afin de comparer directement aperçu et source. Chaque calque conserve son ordre, son état inset, quatre longueurs en pixels, sa couleur hexadécimale et son opacité.

Associez une ombre de contact et une ombre ambiante

Utilisez un premier calque 0 px, 4 px, 10 px, -4 px avec #0F172A à 30 pour cent. Ajoutez un second à 0 px, 18 px, 36 px, -12 px avec la même couleur à 18 pour cent. Gardez la petite ombre de contact en premier afin qu’elle soit peinte au-dessus de l’ombre ambiante large. Deux calques explicites séparent la définition proche et la douceur distante et se règlent plus facilement qu’un flou extrême. Montez puis redescendez le second calque pour confirmer que seul l’ordre change, puis copiez la déclaration séparée par une virgule.

Réduisez les calques avant d’en ajouter

Évaluez les deux calques sur la vraie surface et près des composants voisins avant d’en ajouter un autre. Supprimez tout calque dont la contribution n’est pas visible à taille normale. Davantage de calques ne créent pas automatiquement une profondeur réaliste et chaque valeur augmente le coût de relecture et de maintenance. Alignez les décalages avec la direction visuelle voulue, utilisez l’opacité plutôt qu’un noir excessif et documentez la déclaration acceptée près du composant propriétaire.

Vérifiez le CSS dans son composant réel

ShadowStack rend la déclaration copiée avec le moteur du navigateur actuel, mais l’aperçu ne certifie ni compatibilité ni accessibilité. Collez la propriété dans le composant réel et testez chaque navigateur, largeur responsive, fond et conteneur avec overflow pris en charge. Un flou large peut être rogné par un ancêtre et une ombre inset peut couvrir le contenu ou les indicateurs de focus. Contrôlez le focus clavier dans chaque état, mesurez le contraste du texte et des contrôles avec un outil dédié et gardez une bordure ou une autre distinction lorsque l’interface dépend de limites claires. La capsule ne conserve ni réglages ni historique ; enregistrez le CSS accepté dans votre feuille versionnée avant rechargement.