Générateur de box-shadow

Réglez le décalage, le flou, l’étendue, la couleur et l’opacité avec des curseurs et regardez une boîte d’aperçu se mettre à jour en temps réel. Le CSS généré se met à jour pendant que vous glissez les curseurs, prêt à coller directement dans une feuille de style.

Mes données sont-elles envoyées quelque part ?

Non, tout s’exécute dans votre navigateur : il n’y a rien à envoyer et ce que vous créez n’est jamais suivi.

Que contrôlent vraiment le décalage, le flou et l’étendue ?

Le décalage horizontal et vertical éloigne l’ombre de la boîte : des valeurs positives la poussent vers la droite et le bas, des valeurs négatives vers la gauche et le haut. Le flou détermine la netteté du bord de l’ombre, d’une silhouette dure à zéro jusqu’à une lueur diffuse aux valeurs élevées. L’étendue agrandit ou réduit la forme de l’ombre avant l’application du flou : une étendue positive rend l’ombre plus grande que la boîte de tous les côtés, une étendue négative la resserre. Couleur et opacité travaillent ensemble : choisissez une couleur hexadécimale, et le curseur d’opacité règle son intensité, l’outil convertissant le tout en une valeur rgba() standard en coulisse. Activer l’option intérieure (inset) fait passer l’ombre de l’extérieur de la boîte vers l’intérieur, ce qui donne un effet creusé ou enfoncé plutôt qu’un effet en relief.

Comment fonctionnent les calques d’ombre multiples ?

Ajoutez plusieurs calques pour empiler des ombres comme le permet CSS, chacune séparée par une virgule dans la valeur finale box-shadow. Un motif courant consiste à combiner une ombre resserrée, sombre et peu opaque proche de la boîte avec une autre plus douce, plus large et plus claire un peu plus loin, ce qui donne une impression de profondeur plus naturelle qu’une ombre unique. Les calques s’affichent dans l’ordre où vous les ajoutez, le premier étant dessiné au-dessus, exactement comme le navigateur peint les valeurs box-shadow séparées par des virgules. Vous pouvez mélanger des calques intérieurs et extérieurs dans le même empilement, utile pour une carte qui a besoin à la fois d’une ombre extérieure discrète et d’un léger reflet intérieur.

Usages courants : cartes et boutons qui ont besoin de profondeur, effets neumorphiques ou intérieurs, ou simplement régler l’ombre parfaite sans deviner les valeurs en pixels à la main. Consultez la référence box-shadow de MDN pour la syntaxe complète et la compatibilité des navigateurs, et le guide MDN sur les couleurs CSS pour comprendre les valeurs rgba() du CSS généré.