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

Lisez le premier calque comme l’ombre supérieure

Une liste box-shadow séparée par des virgules est ordonnée : la première ombre est peinte au-dessus des suivantes. Cela compte lorsque des calques opaques ou inset se chevauchent. Les onglets ShadowStack suivent exactement l’ordre du CSS copié. Monter échange le calque sélectionné avec le précédent et Descendre avec le suivant, sans recalculer couleur, flou ou géométrie. Comparez le code après chaque déplacement et utilisez un petit calque supérieur sombre au-dessus d’un calque inférieur plus large et clair pour créer une profondeur contrôlée.

Gardez chaque calque explicite et borné

Le générateur accepte un à huit calques. Ajouter insère une ombre externe neutre juste après le calque sélectionné, ce qui rend sa position prévisible. La suppression s’arrête à un calque afin de garder la déclaration valide. Chaque calque possède ses propres valeurs inset, décalages, flou, étendue, couleur et opacité ; aucune source lumineuse globale ou mise à l’échelle automatique n’est cachée. Au-delà de huit calques, simplifiez l’effet ou gérez le CSS final directement, car une grande pile synthétique devient difficile à relire et peut ajouter un travail de peinture inutile.

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.