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é.

Utilisez un calque externe exact

Partez du document initial : X vaut 0 px, Y 12 px, le flou 28 px, l’étendue -8 px, la couleur #0F172A et l’opacité 28 pour cent. Le résultat est box-shadow: 0px 12px 28px -8px rgb(15 23 42 / 0.28);. L’étendue négative contracte la forme avant le flou et garde la zone sombre près de la carte. Copiez la déclaration, testez-la sur le vrai fond puis modifiez un nombre à la fois si la séparation ou la direction doit changer.

Contrôlez la limite, pas seulement le flou

Une ombre douce ne doit pas être le seul élément séparant une carte interactive de son fond. Contrôlez la carte avec texte normal et agrandi, focus clavier et préférences de contraste élevé. Si la limite devient floue, ajoutez une bordure explicite ou une différence de surface dans le CSS du composant plutôt que d’assombrir toujours l’ombre. ShadowStack produit volontairement uniquement box-shadow afin que ces décisions indépendantes restent visibles dans votre feuille.

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.