Comment créer une ombre CSS (box-shadow) avec aperçu en direct
Publié le 14 septembre 2026 · 2 min de lecture
Obtenir le bon décalage, flou, étalement et couleur d'une box-shadow signifie généralement modifier le CSS et rafraîchir un onglet de navigateur de manière répétée. Cet outil vous donne des curseurs et un aperçu en direct pour que vous puissiez voir l'effet exact avant de copier le CSS.
Essayer Générateur d'ombre CSSÉtapes
- 1
Ouvrez le Générateur de CSS Box Shadow
Accédez au générateur de box-shadow.
- 2
Choisissez un préréglage ou commencez personnalisé
Choisissez un préréglage de style Tailwind, ou réglez votre propre décalage, flou, étalement et couleur.
- 3
Ajoutez une deuxième couche d'ombre (optionnel)
Superposez une deuxième ombre pour plus de profondeur, comme le font souvent les systèmes de design.
- 4
Copiez le CSS
Collez la règle box-shadow générée directement dans votre feuille de style.
Questions fréquentes
Oui — activez le mode inset pour obtenir une ombre qui apparaît à l'intérieur de la bordure de l'élément plutôt qu'à l'extérieur.
Oui — activez une deuxième couche d'ombre pour un effet de profondeur plus nuancé et superposé, une technique courante dans les systèmes de design modernes.
Oui — l'aperçu rend la propriété CSS box-shadow réelle, donc ce que vous voyez est exactement ce que vous obtiendrez en collant le code.
Comme l'aperçu se met à jour en direct à mesure que vous ajustez chaque curseur, vous pouvez affiner une ombre pour qu'elle soit exactement comme vous le souhaitez avant même de toucher votre feuille de style.