invert()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨septembre 2016⁩.

La fonction CSS invert() permet d'inverser les couleurs de l'image. Le résultat de cette fonction est une valeur <filter-function>.

Exemple interactif

filter: invert(0);

filter: invert(0.3);

filter: invert(50%);

filter: invert(70%);

filter: invert(1);

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

Syntaxe

css

/* Aucune inversion */
invert(0)

/* Inversion complète */
invert()
invert(1)
invert(100%)

/* Inversion à 60% */
invert(.6)
invert(60%)

Paramètres

<number> ou <percentage> Facultatif: Définit le niveau d'inversion. Une valeur de 100% inverse complètement l'image, tandis qu'une valeur de 0% laisse l'image inchangée. Les valeurs comprises entre 0% et 100% appliquent un effet proportionnel. La valeur initiale utilisée pour l'interpolation est 0. La valeur par défaut est 1.

Syntaxe formelle

<invert()> = 
  invert( [ <number> | <percentage> ]? )

L'élément de filtre SVG <feComponentTransfer> peut aussi être utilisé pour inverser le contenu en appliquant une inversion équivalente sur les éléments imbriqués <feFuncR>, <feFuncG> et <feFuncB> de type table. En définissant la même valeur tableValue pour les primitives de filtre rouge, vert et bleu, on peut ensuite référencer l'effet SVG par l'identifiant de l'élément <filter> :

html

<svg role="none">
  <filter id="invert90">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.1 0" />
      <feFuncG type="table" tableValues="0.1 0" />
      <feFuncB type="table" tableValues="0.1 0" />
    </feComponentTransfer>
  </filter>
</svg>

Les déclarations suivantes produisent le même effet :

css

filter: invert(0.9);
filter: invert(90%);
filter: url("#invert90"); /* avec SVG intégré */
filter: url("fileName.svg#invert90"); /* SVG externe */

Exemples

Cet exemple montre trois images à titre de comparaison : une image avec la fonction de filtre invert() appliquée, une image avec la fonction SVG équivalente, et l'image d'origine :

SVG

On crée un filtre SVG qui inverse le contenu auquel il est appliqué à 70 % :

html

<svg height="0">
  <filter id="invert">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.3 0" />
      <feFuncG type="table" tableValues="0.3 0" />
      <feFuncB type="table" tableValues="0.3 0" />
    </feComponentTransfer>
  </filter>
</svg>

CSS

On ajoute du CSS qui inverse les éléments selon leur classe filter ou svgFilter :

css

.filter {
  filter: invert(70%);
}

.svgFilter {
  filter: url("#invert");
}

<table cellpadding="5">
  <thead>
    <tr>
      <th>Filtre <code>invert()</code></th>
      <th>Équivalent SVG</th>
      <th>Image d'origine</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="svgFilter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <svg id="svg" height="220" width="220" overflow="visible">
          <filter id="svgInvert">
            <feComponentTransfer>
              <feFuncR type="table" tableValues="0.3 0" />
              <feFuncG type="table" tableValues="0.3 0" />
              <feFuncB type="table" tableValues="0.3 0" />
            </feComponentTransfer>
          </filter>
          <image
            href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            filter="url('#svgInvert')" />
        </svg>
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

Spécifications

Specification
Filter Effects Module Level 1 # funcdef-filter-invert

Compatibilité des navigateurs

Voir aussi

Les autres fonctions <filter-function> pouvant être utilisées dans les valeurs des propriétés filter et backdrop-filter sont :

Help improve MDN

Learn how to contribute

This page was last modified on ⁨14 oct. 2025⁩ by MDN contributors.

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