Générateur de Box Shadow
Créez des ombres CSS box-shadow avec curseurs de décalage, flou, étendue, couleur, opacité et mode inset, avec aperçu en direct dans votre navigateur.
🔒 S'exécute entièrement dans votre navigateur — rien n'est téléchargéConcevez des ombres avec un retour en direct
Un box-shadow bien réglé peut donner à une interface un aspect en couches, cliquable et soigné. Une ombre mal réglée peut rendre la même interface terne ou incohérente. Ce générateur vous donne un contrôle direct sur les valeurs qui comptent : décalage horizontal, décalage vertical, flou, étendue, couleur, opacité et mode inset. À mesure que vous déplacez chaque curseur, l'aperçu et le CSS se mettent à jour immédiatement, ce qui facilite l'obtention d'un résultat naturel par rapport à la saisie manuelle de chiffres.
Le résultat est une déclaration CSS standard : il fonctionne donc pour les cartes, les modales, les boutons, les menus déroulants, les barres de navigation et tout autre élément acceptant box-shadow. Aucune image n'est créée et rien n'est envoyé. Le navigateur applique simplement l'ombre à l'élément d'aperçu et copie le CSS final lorsque vous êtes prêt.
Comprendre décalage, flou et étendue
Les décalages horizontal et vertical éloignent l'ombre de l'élément. Un décalage vertical positif suggère souvent que l'objet est surélevé par rapport à la page, tandis qu'une ombre avec peu de décalage peut ressembler à une lueur. Le flou contrôle la douceur : un flou faible crée un bord net et graphique, alors qu'un flou plus élevé produit une ombre diffuse plus réaliste. L'étendue modifie la taille de l'ombre avant l'application du flou. Une étendue positive rend l'ombre plus large et plus lourde ; une étendue négative la resserre pour que le flou paraisse plus subtil.
Utiliser les ombres dans un design system
Les ombres sont plus efficaces lorsqu'elles sont cohérentes. Plutôt que d'inventer une nouvelle ombre pour chaque composant, créez une petite échelle d'élévation : une ombre subtile pour les cartes, une plus forte pour les popovers et une ombre ciblée pour les modales. Testez les ombres sur des surfaces claires comme sombres, car la même opacité peut sembler trop forte sur un fond pâle et trop faible sur un fond sombre. Les ombres inset sont utiles pour les états enfoncés, les champs en creux et les panneaux en retrait, mais elles doivent rester occasionnelles afin que les contrôles restent clairs et accessibles.
Comment utiliser
- Ajuster la géométrieRéglez avec les curseurs le décalage horizontal, le décalage vertical, le flou et l'étendue.
- Choisir la couleurSélectionnez la couleur et l'opacité de l'ombre, puis activez inset si nécessaire.
- Copier le CSSCollez la déclaration box-shadow générée dans votre feuille de style.