Générateur de box-shadow CSS
Concevez des ombres réalistes en superposant plusieurs calques, comme les meilleurs design systems. Réglez décalage, flou, étendue, couleur et opacité de chaque calque et copiez le résultat en CSS ou en classe Tailwind.
Traité à 100 % dans votre navigateur
Ctrl + Enter exécuterCtrl + C copier le résultat
Comment l’utiliser
- 1Partez d’un style (douce, élévation, flottante…) ou de zéro.
- 2Sélectionnez un calque et réglez décalage, flou, étendue, couleur et opacité.
- 3Ajoutez des calques avec « + » pour des ombres plus naturelles, ou cochez « inset » pour une ombre intérieure.
- 4Changez la couleur de la boîte, le fond et le rayon, puis copiez le CSS ou la classe Tailwind.
Cas d’usage
- Cartes, menus déroulants et modales avec une profondeur réaliste.
- États de survol et d’élévation pour les boutons.
- Styles brutalistes avec ombres dures ou effets de halo.
- Champs de formulaire avec ombre intérieure.
Questions fréquentes
Comment fonctionne la propriété box-shadow ?
Elle prend un décalage horizontal et vertical, un flou, une étendue et une couleur, plus le mot-clé facultatif inset. On peut enchaîner plusieurs ombres séparées par des virgules ; la première est dessinée au-dessus.
Pourquoi utiliser plusieurs calques ?
Les ombres réelles ont une zone nette près de l’objet et une zone diffuse plus loin. Superposer des calques au flou différent et à faible opacité reproduit ce comportement et rend un résultat bien plus naturel.
À quoi sert la valeur d’étendue (spread) ?
Elle agrandit (valeurs positives) ou réduit (valeurs négatives) l’ombre avant le flou. Un spread négatif avec un fort flou crée des ombres douces qui ne dépassent pas sur les côtés.
Comment l’utiliser dans Tailwind CSS ?
Choisissez l’onglet Tailwind et copiez la classe à valeur arbitraire, par exemple shadow-[0px_10px_30px_-5px_rgba(0,0,0,0.2)]. Elle fonctionne dans Tailwind v3 et v4 sans configuration supplémentaire.