drop-shadow()

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨septembre 2016⁩.

La fonction CSS drop-shadow() permet d'appliquer une ombre portée sur une image. Le résultat de cette fonction est une valeur <filter-function>.

Exemple interactif

filter: drop-shadow(30px 10px 4px #4444dd);

filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));

filter: drop-shadow(0 0 0.75rem crimson);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné avec une couleur donnée et fusionné sous l'image.

Note : Cette fonction s'apparente à la propriété box-shadow. La propriété box-shadow permet de créer une ombre rectangulaire sous la boîte entière d'un élément. En revanche, la fonction drop-shadow() permet de créer un ombre qui épouse la forme (le canal alpha) de l'image même.

Syntaxe

css

/* Deux valeurs de longueur */
/* drop-shadow( <length> <length> ) */
drop-shadow(5px 5px)

/* Trois valeurs de longueur */
/* drop-shadow( <length> <length> <length> ) */
drop-shadow(5px 5px 15px)

/* Deux valeurs de longueur et une couleur */
/* drop-shadow( <length> <length> <color> ) */
drop-shadow(5px 5px red)

/* Trois valeurs de longueur et une couleur */
/* drop-shadow( <length> <length> <length> <color> ) */
drop-shadow(5px 5px 15px red)

/* L'ordre des valeurs couleur et longueur peut être inversé */
/* drop-shadow( <color> <length> <length> <length> ) */
drop-shadow(#ee2233 0.5rem 0.5rem 1rem)

/* Empiler plusieurs ombres en passant plusieurs drop-shadow en tant que
   filtre */
drop-shadow(10px 10px red) drop-shadow(-5px -5px yellow)

La fonction drop-shadow() accepte un paramètre de type <shadow> (tel que défini dans la documentation de box-shadow), mais pour lequel le mot-clé inset et le paramètre spread ne sont pas acceptés.

Paramètres

<color> Facultatif: Définit la couleur de l'ombre. Si elle n'est pas précisée, la valeur de la propriété color définie sur l'élément parent est utilisée.
<length>: Définit la longueur de décalage de l'ombre. Ce paramètre accepte deux ou trois valeurs. Si deux valeurs sont précisées, elles correspondent à <offset-x> (décalage horizontal) et <offset-y> (décalage vertical). Une valeur négative pour <offset-x> place l'ombre à gauche de l'élément. Une valeur négative pour <offset-y> place l'ombre au-dessus de l'élément. Si une valeur n'est pas précisée, 0 est utilisé par défaut. Si une troisième valeur est précisée, elle correspond à <standard-deviation>, c'est-à-dire l'écart type utilisé pour la fonction de flou gaussien. Plus la valeur de <standard-deviation> est grande, plus l'ombre sera grande et floue. Les valeurs négatives pour <standard-deviation> ne sont pas autorisées.

Syntaxe formelle

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )

Exemples

Définir une ombre portée

html

<div>drop-shadow(16px 16px)</div>
<div>drop-shadow(16px 16px red)</div>
<div>drop-shadow(red 1rem 1rem 10px)</div>
<div>drop-shadow(-16px -16px red)</div>
<div>
  drop-shadow(1px 1px red) drop-shadow(1px -1px red) drop-shadow(-1px 1px red)
  drop-shadow(-1px -1px red)
</div>

css

div {
  display: inline-block;
  margin: 0 0.5rem 2rem 1rem;
  padding: 0.5rem;
  height: 100px;
  width: 190px;
  vertical-align: top;
  background-color: #222222;

  color: lime;
}

div:nth-child(1) {
  filter: drop-shadow(16px 16px);
}

div:nth-child(2) {
  filter: drop-shadow(16px 16px red);
}

div:nth-child(3) {
  filter: drop-shadow(red 1rem 1rem 10px);
}

div:nth-child(4) {
  filter: drop-shadow(-16px -16px red);
}

div:nth-child(5) {
  filter: drop-shadow(1px 1px red) drop-shadow(1px -1px red)
    drop-shadow(-1px 1px red) drop-shadow(-1px -1px red);
}

En l'absence de valeur <color> dans la fonction drop-shadow() du premier bloc, l'ombre utilise la valeur de la propriété color de l'élément (lime). Les deuxième et troisième ombres illustrent que l'ordre des valeurs de longueur et de couleur peut être inversé. La troisième ombre montre l'effet de flou lorsqu'une troisième valeur <length> est précisée. La quatrième ombre utilise des décalages négatifs, ce qui déplace l'ombre vers la gauche et le haut. Le cinquième exemple montre comment appliquer plusieurs ombres portées à un même élément.

Spécifications

Specification
Filter Effects Module Level 1 # funcdef-filter-drop-shadow

Compatibilité des navigateurs

Voir aussi

Les fonctions <filter-function> :
La propriété filter
La propriété backdrop-filter
La propriété box-shadow
La propriété text-shadow
Introduction aux ombres portées sur le texte
Le module des effets de filtre CSS

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨14 oct. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content