La page démarre avec deux calques d’ombre. Réglez décalage, flou, étalement, couleur, opacité et ombre intérieure sur chaque calque, ajoutez-en jusqu’à quatre et copiez une seule déclaration box-shadow.
Fonctionne localement dans votre navigateurLa page s’ouvre sur deux ombres posées sur une carte d’aperçu blanche : 0px 18px 42px -14px rgba(31, 71, 53, 0.28) et 0px 4px 10px 0px rgba(31, 71, 53, 0.12). L’aperçu et le panneau d’export sont la même chaîne : ce que vous voyez est ce que « Copier CSS » place dans le presse-papiers.
Chaque calque garde son décalage, son flou, son étalement, sa couleur, son opacité et son option d’ombre intérieure. Un nouveau calque est dérivé du calque actif au lieu de partir vide : « Ajouter un calque » ajoute 4px en Y, 10px au flou (plafonné à 200) et retire 0,06 à l’opacité (plancher 0,05), en recopiant l’étalement et la couleur et en laissant l’ombre intérieure décochée.
Les calques sont imprimés dans l’ordre de la liste, un par ligne, sous la forme d’une seule valeur box-shadow. La première ligne est l’ombre peinte au-dessus : dans un test de pixels avec du rouge et 24px d’étalement en calque 1 et du bleu avec 12px en calque 2, la bande de chevauchement de 0-12px était rouge ; les calques suivants n’apparaissent donc que là où le précédent est plus petit ou plus transparent.
« Ajouter un calque » dérive la nouvelle entrée de l’active (Y + 4px, flou + 10px jusqu’à 200, opacité - 0,06 jusqu’à 0,05, même étalement et même couleur, sans ombre intérieure). « Supprimer le calque » efface la ligne active et en garde au moins une ; le compteur affiche de 1 calque à 4 calques.
Décalage horizontal et vertical de -100 à 100, flou de 0 à 200, étalement de -100 à 100 et opacité de 0 à 1. Pendant la saisie, l’aperçu reste dans ces limites ; quand le champ perd le focus, la valeur arrondie est réécrite dans le champ, de sorte que le champ, l’aperçu et le code concordent toujours.
Vider un champ restaure la valeur enregistrée auparavant au lieu de passer à zéro. Les pixels fractionnaires gardent une décimale (12.5px reste 12.5px) et l’opacité deux ; saisir x = 999 enregistre 100px et flou = -10 enregistre 0px.
Chaque calque prend une couleur hexadécimale ; l’alpha vient du champ d’opacité, donc pas de hsl(), de couleur nommée, de dégradé ni de seconde couleur. Le sélecteur exporté est fixe et le résultat est une seule déclaration box-shadow, sans variable CSS ni sortie par point de rupture.
Il n’y a ni mode drop-shadow ou text-shadow, ni export image ou SVG, ni historique au-delà de « Réinitialiser ». Tout est calculé dans la page : dans le test, parcourir tous les contrôles, ajouter et retirer un calque, copier et réinitialiser n’a envoyé aucune requête réseau, et la page continue de fonctionner hors ligne.