sepia()

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 sepia() convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vielli. Le résultat de cette fonction est une valeur <filter-function>.

Exemple interactif

filter: sepia(0);

filter: sepia(0.2);

filter: sepia(60%);

filter: sepia(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

sepia(amount)

Paramètres

amount Facultatif: Niveau de conversion, exprimé en nombre (<number>) ou en pourcentage (<percentage>). Une valeur de 100% applique un effet sépia complet, 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

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

Exemples

Exemples de valeurs correctes pour sepia()

css

sepia(0);    /* Aucun effet */
sepia(.65);  /* 65% de sépia */

sepia()      /* Complètement sépia */
sepia(100%);

Spécifications

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

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

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