filter

La propriété CSS 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 comme blur() et contrast() sont incluses dans le standard CSS et permettent d'obtenir des effets prédéfinis.

Exemple interactif

Syntaxe

css
/* 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%);

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

/* On applique plusieurs filtres */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

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

/* Valeurs globales */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

Avec une fonction, on utilisera la forme suivante :

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

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

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

Fonctions

La propriété filter s'utilise avec le mot-clé none ou avec une à plusieurs fonctions parmi celles listées ensuite. Si le paramètre fourni à l'une de ces fonctions est invalide, la fonction reverra none. Sauf mention contraire, les fonctions qui acceptent une valeur exprimée en pourcentage (par exemple 34%) acceptent également les valeurs exprimées en décimal (par exemple 0.34).

Lorsque la valeur de la propriété filter contient plusieurs fonctions, les filtres sont appliqués dans l'ordre.

blur()

Applique un flou gaussien à l'image.

css
filter: blur(5px);
brightness()

Rend l'image plus claire ou plus sombre en utilisant un coefficient multiplicateur. L'effet est linéaire : 0% créera une image complètement noire, 100% ne modifiera pas l'image et les valeurs supérieures à 100% rendront l'image plus claire.

css
filter: brightness(2);
contrast()

Ajuste le contraste de l'image. Une valeur de 0% rendra l'image grise, 100% n'aura pas d'effet et les valeurs supérieures à 100% renforceront le contraste.

css
filter: contrast(200%);
drop-shadow()

Applique une ombre portée suivant les contours de l'image. Son paramètre suit la même syntaxe que celle de la propriété box-shadow (définie dans le module Arrière-plans et bordures CSS), sauf que le mot-clé inset et le paramètre spread ne sont pas autorisés. Tous les filtres appliqués après drop-shadow() sont appliqués à l'ombre portée également.

css
filter: drop-shadow(16px 16px 10px black);
grayscale()

Convertit l'image en niveaux de gris. Un argument de 100% rendra l'image uniquement avec des niveaux de gris. Un argument de 0% ne modifiera pas l'image d'entrée. Les valeurs entre 0% et 100% appliquent un effet proportionnel.

css
filter: grayscale(100%);
hue-rotate()

Applique une rotation de teinte. L'argument angulaire définit le nombre de degrés pour la rotation sur le cercle des teintes. Une valeur de 0deg n'aura pas d'effet sur l'image.

css
filter: hue-rotate(90deg);
invert()

Inverse les couleurs de l'image. Si l'argument vaut 100%, on obtiendra le négatif complet de l'image. Si l'argument vaut 0%, l'image sera inchangée. Les valeurs entre 0% et 100% ont des effets proportionnels.

css
filter: invert(100%);
opacity()

Applique un niveau de transparence. Un coefficient de 0% rendra l'image complètement transparente tandis qu'un coefficient de 100% laissera l'image inchangée.

css
filter: opacity(50%);
saturate()

Sature l'image. Avec un coefficient de 0%, l'image sera complètement désaturée. 100% n'aura pas d'effet sur l'image. Les valeurs supérieures à 100% augmenteront la saturation.

css
filter: saturate(200%);
sepia()

Convertit l'image en sépia. Un coefficient de 100% rendra l'image complètement sépia tandis qu'un coefficient 0% n'aura pas d'effet sur l'image.

css
filter: sepia(100%);

Combiner les fonctions

On peut combiner autant de fonctions que nécessaire pour manipuler le rendu. Les filtres sont alors appliqués dans l'ordre de leur déclaration. Dans l'exemple suivant, on améliore le contraste et la luminosité de l'image :

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

Interpolation

Pour les animations, si les filtres du début et de la fin ont une liste de fonctions de la même taille, sans url() et dans le même ordre, chaque filtre est interpolé selon ses règles particulières.

Si les listes de filtres sont de longueurs différentes, la liste la plus courte est complétée à la fin par les filtres supplémentaires de la liste la plus longue. Les fonctions ajoutées utilisent leur valeur initiale (qui ne modifie pas l'image). Tous les filtres alors présents sont interpolés selon leurs règles particulières. Sinon, c'est une interpolation discrète qui est utilisée.

Définition formelle

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
Valeur calculéecomme spécifié
Type d'animationune liste de fonctions de filtre

Syntaxe formelle

filter = 
  none                 |
  <filter-value-list>  

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

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

<url> = 
  <url()>  |
  <src()>  

<blur()> = 
  blur( <length>? )  

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

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

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

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

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

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

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

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

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

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Exemples

Appliquer des fonctions de filtre

On applique la propriété filter sur la deuxième image, en appliquant des niveaux de gris et un flou (à l'image et à la bordure).

css
img {
  border: 5px solid yellow;
}
/* On passe à 40% de niveau de gris */
/* et un flou de 5px de rayon */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}
html
<img src="pencil.jpg" alt="L'image originale est nette" />
<img src="pencil.jpg" alt="L'image et la bordure sont floues et atténuées" />

Répéter des filtres

Les fonctions de filtre sont appliquées selon leur ordre d'apparition. On peut donc appliquer plusieurs fois un même filtre.

css
#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
    drop-shadow(5px 5px 0 red);
}

Les filtres sont appliqués dans l'ordre, c'est pour cela que les ombres portées ne sont pas de la même couleur. La teinte de la première ombre portée est modifiée par la fonction hue-rotate(), mais pas la teinte de la deuxième.

Spécifications

Specification
Filter Effects Module Level 1
# FilterProperty

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi