---
title: "Ombre : ajouter une ombre portée à un élément"
description: "Ajoutez une ombre portée pour détacher un élément de son fond, avec six préréglages et un réglage fin de chaque paramètre."
url: https://docs.vivlab.com/editor/style/box-shadow
---

# Ombre

Utilisez **Ombre** pour ajouter une ombre autour d'un élément et le faire ressortir du fond. Choisissez l'un des six réglages proposés, puis ajustez chaque paramètre si nécessaire.

Le **décalage X** déplace l'ombre vers la gauche ou la droite ; le **décalage Y** la déplace vers le haut ou le bas. Le **flou** adoucit ses contours. L'**étalement** agrandit ou réduit l'ombre autour de l'élément.

<DocsScreenshot name="editor-shadow-settings" alt="Le style, la couleur, les décalages et la diffusion de l’ombre." :width="341" :height="474" />

## Style d'ombre

Le sélecteur **Style d'ombre** propose six préréglages :

- **Réaliste** : ombre douce et dégradée, comme une vraie ombre projetée.
- **Plate** : ombre nette sans flou, dans un style graphique.
- **Petit** : ombre légère, idéale pour des cartes posées.
- **Moyen** : ombre standard, lisible et discrète.
- **Grand** : ombre prononcée, pour faire ressortir un élément clé.
- **Très grand** : ombre très marquée, pour un fort effet d'élévation.

Choisir un préréglage configure automatiquement les autres paramètres ci-dessous, que vous pouvez ensuite affiner.

## Couleur

Sélecteur de couleur classique pour la teinte de l'ombre. Les couleurs de votre [thème](https://docs.vivlab.com/sections/themes-brands.md) apparaissent en raccourci. Pour une ombre subtile, gardez du noir avec une faible opacité.

## Décalage X et Y

- **Décalage X** (entre -300 et 300 px) : déplace l'ombre vers la droite (positif) ou vers la gauche (négatif).
- **Décalage Y** (entre -300 et 300 px) : déplace l'ombre vers le bas (positif) ou vers le haut (négatif).

Une ombre **Y positif et X = 0** simule une lumière venant d'en haut, ce qui est le rendu le plus naturel.

## Diffusion (flou)

Curseur **Diffusion** (entre 0 et 500 px). Plus la valeur est grande, plus l'ombre est floue et douce. Une diffusion à 0 donne une ombre nette type style « plat ».

## Étirement (spread)

Curseur **Étirement** (entre -100 et 200 px). Étend l'ombre au-delà de son décalage (valeur positive) ou la rétrécit (valeur négative). Utilisé pour des effets de halo ou de surlignage.

## Réinitialiser

Le bouton **Réinitialiser les paramètres** efface complètement l'ombre.