Générateur d'Ombres
Générez des ombres CSS en un clin d'œil
Réglages
Aperçu
box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.2);
À propos de l'outil
Ce générateur écrit la propriété CSS box-shadow à partir de réglages simples. Il sert à donner du relief à une carte, un bouton ou une fenêtre modale, ou à créer un effet de creux avec une ombre intérieure. L’aperçu montre le résultat sur un bloc blanc posé sur un fond gris clair, et le code affiché suit chaque modification.
Pour chaque ombre, vous choisissez la couleur, l’opacité en pourcentage, le décalage horizontal et vertical, le flou et la diffusion, en pixels, ainsi que l’option Intérieur. Vous pouvez superposer jusqu’à dix ombres, que l’outil combine dans une seule déclaration. La couleur est convertie en rgba() pour intégrer l’opacité. Un flou négatif, invalide en CSS, est ramené à zéro.
Comment l'utiliser
- Dans Réglages, choisissez la Couleur et l’Opacité (%) de l’ombre.
- Ajustez Décalage X, Décalage Y, Flou et Diffusion, et cochez Intérieur pour une ombre interne.
- Cliquez sur Ajouter une ombre pour superposer d’autres ombres, jusqu’à dix.
- Vérifiez l’Aperçu, puis cliquez sur Copier le CSS, ou sur Réinitialiser pour repartir de l’ombre par défaut.
Questions fréquentes
Comment l’opacité est-elle appliquée ?
Le sélecteur de couleur du navigateur ne gère pas la transparence. L’outil sépare donc la couleur et l’opacité, puis les combine en une valeur rgba(), par exemple rgba(0, 0, 0, 0.2) pour du noir à 20 %.
Pourquoi combiner plusieurs ombres ?
Superposer une ombre courte et nette à une ombre large et diffuse donne un relief plus naturel qu’une ombre unique. Les ombres sont séparées par des virgules dans box-shadow ; la première de la liste est dessinée au-dessus des suivantes.
Quelles unités le code utilise-t-il ?
Les décalages, le flou et la diffusion sont exprimés en pixels. Les décalages et la diffusion acceptent des valeurs négatives, par exemple pour placer l’ombre en haut ou la réduire ; le flou est toujours positif ou nul.
Mes ombres sont-elles envoyées à un serveur ?
Non. Le code est calculé dans votre navigateur, sans appel réseau. La liste des ombres est seulement gardée dans le stockage local du navigateur, pour la retrouver à votre prochaine visite.