Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété filter permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures.

Plusieurs fonctions sont inclues dans le standard CSS et permettent d'obtenir des effets prédéfinis. Il est également possible d'utiliser un filtre SVG via une URL référençant un élément SVG filter.

Syntaxe

/* URL vers un filtre SVG */
filter: url("filters.svg#filter-id");

/* Fonctions de filtre */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* On applique plusieurs filtres */
filter: contrast(175%) brightness(3%);

/* On utilise aucun filtre */
filter: none;

/* Valeurs globales */
filter: inherit;
filter: initial;
filter: unset;

Avec une fonction, on utilisera la forme suivante :

filter: <filter-function> [<filter-function>]* | none

En utilisant un élément SVG <filter>, on utilisera la forme suivante :

filter: url(file.svg#filter-element-id) 

Interpolation

Si les deux filtres possèdent chacun une liste de même longueur (sans <url>, chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut none, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise un interpolation discrète.

Syntaxe formelle

none | <filter-function-list>


<filter-function-list> = [ <filter-function> | <url> ]+


<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>


<blur()> = blur( <length> )
<brightness()> = brightness( <number-percentage> )
<contrast()> = contrast( [ <number-percentage> ] )
<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )
<grayscale()> = grayscale( <number-percentage> )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( <number-percentage> )
<opacity()> = opacity( [ <number-percentage> ] )
<saturate()> = saturate( <number-percentage> )
<sepia()> = sepia( <number-percentage> )


<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>


<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

Voici un rapide exemple de filtre fonctionnel. Chaque fonction est illustrée en détail par la suite.

.mydiv { filter: grayscale(50%) }

/* on applique un niveau de gris à 50% */
/* et un flou dont le rayon vaut 10px  */
img {
  filter: grayscale(0.5) blur(10px);
}

Voici un rapide exemple de filtre utilisant une ressource SVG :

.target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }

Fonctions prédéfinies

Pour utiliser la propriété CSS filter, on utilisera none ou une ou plusieurs des fonctions listées ci-après avec, pour chacune, un argument. Si la valeur est invalide, la fonction renverra none. Sauf mention contraire, les fonctions qui acceptent des valeurs exprimées en pourcentages (34%) acceptent également des valeurs décimales (0.34).

url()

La fonction url() prend comme argument l'emplacement d'un fichier XML qui définit le filtre SVG à appliquer. L'URL peut faire référence à une ancre d'un élément spécifique.

filter: url(resources.svg#c1)

blur()

Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé. La valeur par défaut du paramètre est 0. Selon la spécification, le paramètre est une valeur de type <length> mais la fonction n'accepte pas de valeurs exprimées en pourcentages.

filter: blur(5px)
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

Note : Voir blur() pour plus d'informations.

brightness()

La fonction permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal 0% créera une image totalement noire et une valeur de 100% conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est 1.

filter: brightness(0.5)
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="[amount]"/>
        <feFuncG type="linear" slope="[amount]"/>
        <feFuncB type="linear" slope="[amount]"/>
    </feComponentTransfer>
  </filter>
</svg>

Note : Voir brightness() pour plus d'informations.

contrast()

Cette fonction permet d'ajuster le contraste de l'image d'entrée. Une valeur de 0% créera une image entièrement grise. Une valeur de 100% conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est 1.

filter: contrast(200%)
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
    </feComponentTransfer>
  </filter>
</svg>

Note : Voir contrast() pour plus d'informations.

drop-shadow()

Cette fonction permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type <shadow> (définie dans la spécification CSS3 sur les arrière-plans), une exception : le mot-clé inset n'est pas autorisée. Cette fonction est semblable à la propriété box-shadow plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleurs performances. Les paramètres de l'argument <shadow> sont les suivants :

<offset-x> <offset-y> (nécessaire)
Deux valeurs <length> qui indiquent le décalage de l'ombre portée. <offset-x> définit la distance horizontale : des valeurs négatives décaleront l'ombre à gauche de l'élément. <offset-y> définit la distance verticale : des valeurs négatives décaleront l'ombre au-dessus de l'élément. Se référer à la page <length> pour les différentes unités utilisables.
Si les deux valeurs sont nulles, l'ombre sera exactement placée sous l'élément (et pourra servir à générer un effet de flou si <blur-radius> et/ou <spread-radius> sont utilisés).
<blur-radius> (optionnel)
Une troisième valeur de type <length>. Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisée. La valeur par défaut est 0, le bord de l'ombre sera droit.
<spread-radius> (optionnel)
Un quatrième valeur de type <length>. Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est 0 (l'ombre aura la même taille que l'élément). 
Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.
<color> (optionnel)
Voir <color> pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété color est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile).
filter: drop-shadow(16px 16px 10px black)
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
 <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

Note : Voir drop-shadow() pour plus d'informations.

grayscale()

L'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de 100% sera complètement en niveaux de gris. 0% conservera l'image telle quelle. La valeur par défaut du paramètre est 0.

filter: grayscale(100%)

Note : Voir grayscale() pour plus d'informations.

hue-rotate()

Cette fonction applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de 0deg conservera l'image telle quelle. La valeur par défaut du paramètre est 0deg. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à 360deg est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée.

filter: hue-rotate(90deg)
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgHueRotate" >
    <feColorMatrix type="hueRotate" values="[angle]" />
  <filter />
</svg>

Note : Voir hue-rotate() pour plus d'informations.

invert()

Cette fonction permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de 100% inversera complètement les couleurs (tel un négatif) et une valeur 0% conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est 0.

filter: invert(100%)

Note : Voir invert() pour plus d'informations.

opacity()

Cette fonction permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de 0% rendra l'image complètement transparente et une valeur de 100% conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est 1. Cette fonction est proche de la propriété opacity, toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances.

filter: opacity(50%)

Note : Voir opacity() pour plus d'informations.

saturate()

L'image d'entrée est saturée. La valeur de l'argument indique la force de la saturation. Une valeur de 0% fera que l'image sera totalement désaturée et une valeur de 100% conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à 100% pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est 1.

filter: saturate(200%)

Note : Voir saturate() pour plus d'informations.

sepia()

L'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de 0%, l'image d'entrée sera inchangée. Les valeurs comprises entre 0% et 100% appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est 0.

filter: sepia(100%)

Note : Voir sepia() pour plus d'informations.

Enchaîner les fonctions

On peut appliquer autant de fonction que nécessaire pour manipuler le rendu obtenu. Dans l'exemple suivant, on augmente le contraste et la luminosité de l'image :

filter: contrast(175%) brightness(103%)

Spécifications

Spécification État Commentaires
Filter Effects Module Level 1
La définition de 'filter' dans cette spécification.
Version de travail Définition initiale.
Valeur initialenone
Applicabilitétous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments defs et des éléments graphiques
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationune liste de fonctions de filtre
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
filter
Expérimentale
Chrome Support complet 53
Support complet 53
Support complet 18
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes In Chrome 18 to 19, the saturate() function only takes integers instead of decimal or percentage values. From Chrome 20, this bug is fixed.
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 35
Support complet 35
Support partiel 34
Désactivée
Désactivée From version 34: this feature is behind the layout.css.filters.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 46
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support Non
Notes
Aucun support Non
Notes
Notes Internet Explorer 4 to 9 implemented a non-standard filter property. The syntax was completely different from this one and is not documented here.
Opera Support complet 40
Support complet 40
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 9.1
Support complet 9.1
Support complet 6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 53
Support complet 53
Support complet 4.4
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 53Firefox Android Support complet 35
Support complet 35
Support partiel 34
Désactivée
Désactivée From version 34: this feature is behind the layout.css.filters.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 46
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 41
Support complet 41
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 9.3
Support complet 9.3
Support complet 6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet 6.0
On SVG elementsChrome Support complet OuiEdge Aucun support NonFirefox Support complet 35IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 35Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,