Générateur d'ombres CSS
Composez visuellement une ou plusieurs ombres CSS (box-shadow), ajustez le flou, la diffusion et la couleur, puis copiez le code.
L'aperçu utilise toujours un fond clair fixe, pour que l'ombre reste visible quel que soit le thème du site.
À propos de cet outil
Ce générateur d'ombres CSS permet de régler visuellement le décalage, le flou, la diffusion, la couleur et l'opacité d'une ombre, avec un aperçu en direct, et de superposer plusieurs ombres pour un effet plus riche.
Comment utiliser cet outil
- Ajustez les curseurs de décalage horizontal, vertical, flou et diffusion.
- Choisissez la couleur et l'opacité de l'ombre.
- Ajoutez une deuxième ombre pour un effet en couches.
- Copiez la propriété box-shadow générée.
Questions fréquentes
Comment fonctionne la propriété box-shadow en CSS ?
box-shadow accepte un décalage horizontal, un décalage vertical, un flou, une diffusion et une couleur, dans cet ordre : c'est exactement ce que règlent les curseurs de l'outil.
Puis-je créer une ombre interne (inset) ?
Oui, activez l'option « intérieure » : l'outil ajoute le mot-clé inset au code généré pour une ombre à l'intérieur de l'élément.
Comment superposer plusieurs ombres ?
Cliquez sur « Ajouter une ombre » : les ombres se cumulent, séparées par une virgule dans le code CSS final, du premier plan à l'arrière-plan.
Le résultat correspond-il à ce que je vois dans l'aperçu ?
Oui, l'aperçu utilise directement la propriété CSS générée, donc le rendu dans votre navigateur sera identique.