Utilitaires

Ombres

Les classes shadow-* ajoutent ou retirent une ombre portée. Trois tailles sont proposées, plus une classe pour supprimer l’ombre.

Tailles d’ombre#

Sur un fond clair, l’ombre est plus visible avec un élément blanc.

Sans ombre (shadow-none)

Ombre fine (shadow-sm)

Ombre standard (shadow)

Ombre large (shadow-lg)

<div class="row g-4 p-3">
  <div class="col-sm-6 col-lg-3"><div class="shadow-none p-3 bg-body border rounded">Sans ombre (<code>shadow-none</code>)</div></div>
  <div class="col-sm-6 col-lg-3"><div class="shadow-sm p-3 bg-body rounded">Ombre fine (<code>shadow-sm</code>)</div></div>
  <div class="col-sm-6 col-lg-3"><div class="shadow p-3 bg-body rounded">Ombre standard (<code>shadow</code>)</div></div>
  <div class="col-sm-6 col-lg-3"><div class="shadow-lg p-3 bg-body rounded">Ombre large (<code>shadow-lg</code>)</div></div>
</div>

Classes et valeurs

Il existe aussi --bs-box-shadow-inset (inset 0 1px 2px rgba(0, 0, 0, 0.075)), sans classe utilitaire associée.

Classes et valeurs
Classe	Variable CSS	Valeur
`shadow-none`	—	`box-shadow: none`
`shadow-sm`	`--bs-box-shadow-sm`	`0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)`
`shadow`	`--bs-box-shadow`	`0 0.5rem 1rem rgba(0, 0, 0, 0.15)`
`shadow-lg`	`--bs-box-shadow-lg`	`0 1rem 3rem rgba(0, 0, 0, 0.175)`

Variables Sass

Variables Sass
Variable	Valeur par défaut	Rôle
`$box-shadow`	`0 .5rem 1rem rgba($black, .15)`	Ombre de la classe `shadow`.
`$box-shadow-sm`	`0 .125rem .25rem rgba($black, .075)`	Ombre de la classe `shadow-sm`.
`$box-shadow-lg`	`0 1rem 3rem rgba($black, .175)`	Ombre de la classe `shadow-lg`.
`$box-shadow-inset`	`inset 0 1px 2px rgba($black, .075)`	Ombre intérieure, utilisée par certains champs.
`$enable-shadows`	`false`	Ajoute des ombres aux composants (boutons, champs…). Les classes `shadow-*` fonctionnent dans tous les cas.

Bonnes pratiques

À faire

Utilisez l’ombre pour signaler une hiérarchie (carte survolée, menu flottant), avec parcimonie.
Gardez une taille cohérente pour des éléments du même niveau.

À éviter

Ne comptez pas sur l’ombre seule pour distinguer deux zones : ajoutez une bordure ou un fond.

Accessibilité

Une ombre n’est pas lue par les technologies d’assistance : ne portez aucune information uniquement par elle.