Générateur d'Ombre CSS

Contrôles

Aperçu

Sortie CSS

 
  
 
Règle complète
 
 
 
  
 
 
 
Comment l'utiliser
 
     
  1. Définissez le décalage — Faites glisser les curseurs X/Y pour positionner l'ombre.
    2.  
  2. Flou & étalement — Augmentez le flou pour des bords doux ; ajustez l'étalement pour agrandir ou réduire l'ombre.
    3.  
  3. Couleur & opacité — Choisissez une couleur et une transparence. Les ombres sombres semi-transparentes paraissent les plus naturelles.
    4.  
  4. Activez inset — Pour des ombres intérieures sur les champs ou boutons enfoncés.
    5.  
  5. Copiez & collez — Cliquez sur « Copier le CSS » et utilisez-le directement dans votre feuille de style.
    6.  
 
 
 
Qu'est-ce que CSS box-shadow ?
 
box-shadow dessine des ombres autour de la boîte de bordure d'un élément — sans image. Chaque ombre comprend un décalage X/Y, un flou, un étalement et une couleur.
 
Utilisez inset pour les ombres intérieures. Les ombres suivent border-radius automatiquement. Empilez plusieurs couches (ombre nette + ombre ambiante douce) pour une profondeur réaliste.
 
 
 
Cas d'usage courants
 
 
Élévation de cartes
 
Modales & menus déroulants
 
États survol de boutons
 
Champs de saisie en creux
 
Boutons d'action flottants
 
Profondeur en thème sombre
 
 
Conseils & bonnes pratiques
 
 
 Utilisez rgba() 
Gardez l'opacité indépendante de la teinte — plus facile à régler en modes clair et sombre.
 
 
 Empilez deux couches 
Une petite ombre sombre près de l'élément plus une grande ombre ambiante douce crée une profondeur réaliste.
 
 
 Source de lumière cohérente 
Gardez la même direction d'ombre (généralement bas-droite) dans toute votre interface.
 
 
 Performance 
Évitez d'animer de grands flous sur de nombreux éléments à la fois — cela peut nuire aux performances de défilement sur mobile.
 
 
 
Questions fréquentes
 
 
Quelle différence entre flou et étalement ?
 
Le flou adoucit les bords — des valeurs plus élevées le rendent plus diffus. L'étalement modifie la taille de l'ombre avant le flou : positif l'agrandit, négatif la réduit.
 
 
 
Quand utiliser inset ?
 
Utilisez inset pour les boutons enfoncés, les champs de formulaire et les panneaux en creux. Les ombres externes (par défaut) soulèvent les éléments au-dessus de l'arrière-plan.
 
 
 
Puis-je appliquer plusieurs ombres ?
 
Oui. Utilisez des valeurs séparées par des virgules. Cet outil prend en charge jusqu'à trois couches — suffisant pour les ombres principale, ambiante et de rehaut.
 
 
 
box-shadow ou drop-shadow — lequel choisir ?
 
box-shadow suit la boîte de bordure (cartes, boutons). filter: drop-shadow() suit la forme alpha (icônes, découpes PNG).
 
 
 
box-shadow fonctionne-t-il dans tous les navigateurs ?
 
Oui. Pris en charge sans préfixe dans tous les navigateurs modernes. Testez les ombres empilées sur les appareils cibles si vous utilisez de grandes valeurs de flou.