Générateur d'ombre CSS (box-shadow)
Générez du code CSS box-shadow personnalisé avec contrôle des décalages, du flou, de la diffusion, de la couleur et de l'option interne.
Exécuter l’outil
Ce générateur d'ombres CSS produit la déclaration `box-shadow` adaptée à vos composants graphiques et vos conteneurs d'interface. Vous définissez le décalage horizontal, le décalage vertical, le rayon de flou et le rayon d'étalement en pixels, ainsi que la teinte de l'ombre au format texte hexadécimal ou RGBA. Une case à cocher active le mot-clé interne `inset` lorsque vous désirez appliquer un effet de relief enfoncé vers l'intérieur de l'élément plutôt qu'une projection externe classique. L'outil applique les unités en pixels directement sur chaque valeur numérique saisie et combine l'ensemble des réglages dans une règle CSS prête à copier. Toutes les dimensions acceptent des valeurs nulles, ce qui simplifie la création de halos lumineux centrés ou d'ombres diffuses parfaitement symétriques sans décalage d'axe. Ajustez simplement chaque curseur ou champ numérique pour obtenir le rendu visuel recherché sur vos cartes, fenêtres modales et boutons de navigation.
Mode d’emploi
- Indiquez le décalage horizontal (X) et le décalage vertical (Y) souhaités pour orienter l'ombre.
- Précisez la valeur du flou pour adoucir le contour et l'étalement pour étendre ou restreindre sa portée.
- Saisissez le code couleur de l'ombre, par exemple au format hexadécimal avec canal alpha.
- Cochez l'option d'ombre interne si vous souhaitez projeter l'ombre à l'intérieur du conteneur.
- Copiez la règle CSS générée pour l'insérer dans votre feuille de styles.
Exemples
- Ombre portée douce standard : Décalage X à 2, Décalage Y à 4, Flou à 8, Étalement à 0, Couleur `#00000026`, Inset décoché donne `box-shadow: 2px 4px 8px 0px #00000026;`.
- Ombre interne encastrée : Décalage X à 0, Décalage Y à 2, Flou à 4, Étalement à 0, Couleur `#00000040`, Inset coché donne `box-shadow: inset 0px 2px 4px 0px #00000040;`.
FAQ
Comment créer un halo régulier tout autour d'un conteneur ?
Définissez le décalage horizontal et le décalage vertical à 0, puis augmentez le rayon de flou et la diffusion selon l'intensité désirée.
À quoi correspond le mot-clé inset dans la déclaration ?
Le mot-clé `inset` inverse l'affichage pour placer l'ombre à l'intérieur de la bordure du bloc, donnant une impression de profondeur ou de creux.
Quels formats de couleur peut-on renseigner dans le champ couleur ?
Vous pouvez utiliser des notations hexadécimales avec ou sans transparence comme `#00000033`, ou toute chaîne de couleur CSS compatible.