Fonction CSS `drop-shadow()`

Baseline Large disponibilit

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.

En savoir plus
Voir la compatibilit complte

La fonction CSS drop-shadow() permet d'appliquer une ombre porte sur une image. Le rsultat 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 porte correspond une version floute et dcale du masque alpha de l'image, dessin avec une couleur donne et fusionn sous l'image.

Note : Cette fonction s'apparente la proprit box-shadow. La proprit box-shadow permet de crer une ombre rectangulaire sous la bote entire d'un lment. En revanche, la fonction drop-shadow() permet de crer un ombre qui pouse la forme (le canal alpha) de l'image mme.

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 paramtre de type <shadow> (tel que dfini dans la documentation de box-shadow), mais pour lequel le mot-cl inset et le paramtre spread ne sont pas accepts.

Paramtres

<color> Facultatif: Dfinit la couleur de l'ombre. Si elle n'est pas prcise, la valeur de la proprit color dfinie sur l'lment parent est utilise.
<length>: Dfinit la longueur de dcalage de l'ombre. Ce paramtre accepte deux ou trois valeurs. Si deux valeurs sont prcises, elles correspondent <offset-x> (dcalage horizontal) et <offset-y> (dcalage vertical). Une valeur ngative pour <offset-x> place l'ombre gauche de l'lment. Une valeur ngative pour <offset-y> place l'ombre au-dessus de l'lment. Si une valeur n'est pas prcise, 0 est utilis par dfaut. Si une troisime valeur est prcise, 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 est grande et floue. Les valeurs ngatives pour <standard-deviation> ne sont pas autorises.

Syntaxe formelle

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

Cette syntaxe reflte le dernier standard selon Filter Effects Module Level 1. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Dfinir une ombre porte

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 proprit color de l'lment (lime). Les deuxime et troisime ombres illustrent que l'ordre des valeurs de longueur et de couleur peut tre invers. La troisime ombre montre l'effet de flou lorsqu'une troisime valeur <length> est prcise. La quatrime ombre utilise des dcalages ngatifs, ce qui dplace l'ombre vers la gauche et le haut. Le cinquime exemple montre comment appliquer plusieurs ombres portes un mme lment.

Spcifications

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

Compatibilit des navigateurs

Voir aussi

Les fonctions <filter-function> :
La proprit filter
La proprit backdrop-filter
La proprit box-shadow
La proprit text-shadow
Introduction aux ombres portes sur le texte
Le module des effets de filtre CSS

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 7 mai 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu

Fonction CSS drop-shadow()

Dans cet article

Aider amliorer MDN

Fonction CSS `drop-shadow()`