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

Inset change la zone peinte, pas les valeurs

Une ombre externe est peinte hors de la boîte de bordure et peut suggérer une élévation. Ajouter inset la peint à l’intérieur pour évoquer une surface enfoncée, un creux ou un bord ombré. ShadowStack place inset au début du calque canonique mais conserve X, Y, flou, étendue, couleur et opacité. La géométrie étant différente, les mêmes nombres peuvent paraître beaucoup plus forts à l’intérieur. Commencez avec une opacité faible et un flou modéré, puis contrôlez le padding et les bordures dans le composant réel.

Mélangez volontairement calques inset et externes

Une déclaration peut contenir des calques externes et inset. Leur ordre reste explicite, mais ils occupent des zones différentes et ne constituent pas des niveaux de profondeur interchangeables. Sélectionnez le bon onglet avant modification et lisez l’étiquette inset avant réorganisation. Un motif sobre associe une ombre externe subtile pour la séparation et un reflet ou ombrage inset peu opaque pour le détail. N’utilisez jamais une ombre comme seul indicateur de focus, d’erreur ou de sélection : elle peut disparaître sur un autre fond ou avec un mode de contraste élevé.

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.