Générateur de box-shadow CSS
Outil de développementNouveauCréez des ombres box-shadow CSS visuellement et copiez le code.
Cet outil s'exécute entièrement dans votre navigateur. Vos fichiers ne quittent jamais votre appareil — rien n'est envoyé.
Shadow settings
Live preview
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
Questions fréquentes
Comment utiliser le générateur de box-shadow CSS ?
Réglez les décalages horizontal et vertical, le flou, l'étalement, la couleur et l'opacité, et activez inset si vous voulez que l'ombre soit dessinée à l'intérieur de l'élément. L'aperçu en direct se met à jour instantanément à chaque changement, et le CSS généré apparaît en dessous pour le copier en un clic.
Mes données sont-elles envoyées quelque part lors de l'utilisation de cet outil ?
Non. Tout s'exécute entièrement dans votre navigateur en JavaScript pur, ni les réglages, ni les couleurs, ni le CSS généré ne sont donc jamais transmis à un serveur. L'outil fonctionne hors ligne une fois chargé, ce qui garde votre travail totalement privé.
Quelle différence entre flou, étalement et inset ?
Le flou adoucit les bords de l'ombre (des valeurs plus élevées donnent des bords plus diffus), tandis que l'étalement agrandit ou réduit l'ombre avant d'appliquer le flou. Inset inverse l'ombre pour la dessiner à l'intérieur de la boîte au lieu de l'extérieur, utile pour des effets d'enfoncement ou de creux.