Aller au contenu principal

Shadows

Ouvrir dans ChatGPT

Les propriétés d'ombre sont utilisées pour ajouter des effets d'ombre autour du cadre d'un élément. Vous pouvez définir plusieurs effets séparés par des virgules. Dans la plupart des cas, les ombres sont utilisées pour signifier des éléments qui sont superposés dans l'interface utilisateur.

Exemple

.element {
box-shadow: var(--dwc-shadow-xl);
}
Couleur d'Ombre

Vous contrôlez la couleur de l'ombre en définissant la variable --dwc-shadow-color. Par défaut, la couleur de l'ombre est grise teintée de la couleur primaire.

Variables

VariableExemple
--dwc-shadow-xs
--dwc-shadow-s
--dwc-shadow-m
--dwc-shadow-l
--dwc-shadow-xl
--dwc-shadow-2xl
--dwc-shadow