filter (CSS) en CSS : flou, contraste et niveaux de gris en une ligne

Flouter une image, l'assombrir légèrement au survol, la passer en noir et blanc : ce sont des réglages qu'on associe naturellement à un logiciel de retouche photo. filter les applique en une seule ligne, directement dans le navigateur, sans jamais toucher au fichier image d'origine.

Le nom prête toutefois à confusion avec un mécanisme SVG bien plus ancien et bien plus verbeux, qui porte exactement le même nom.

Définition

filter applique un ou plusieurs effets visuels au rendu d'un élément, texte et enfants compris, sans modifier la mise en page ni le fichier source. Sa valeur par défaut est none. Chaque effet est une fonction, et plusieurs fonctions peuvent être combinées en les séparant par un espace dans une seule déclaration.

.photo-souvenir {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.photo-souvenir:hover {
  filter: grayscale(0%);
}

Les fonctions les plus utilisées

Chaque fonction règle un aspect précis du rendu, presque toujours avec un pourcentage ou une unité de longueur en argument.

Cumuler plusieurs filtres

Plusieurs fonctions se combinent dans une seule déclaration, appliquées dans l'ordre où elles sont écrites : chaque fonction reçoit le résultat déjà transformé par la précédente. Sur des filtres comme brightness() et contrast(), l'ordre peut légèrement changer le rendu final, ce qui vaut la peine d'être testé visuellement plutôt que supposé.

.miniature-desaturee {
  filter: grayscale(60%) brightness(110%) contrast(105%);
}

hue-rotate() pour une palette dynamique

hue-rotate(180deg) fait pivoter toutes les teintes d'une image ou d'un dégradé autour du cercle chromatique, sans toucher à leur luminosité ni à leur saturation. C'est une technique rapide pour décliner un même visuel en plusieurs variantes de couleur, par exemple pour illustrer différentes catégories d'un même produit sans stocker une image distincte par couleur. Le résultat reste approximatif comparé à une véritable retouche fichier par fichier, mais suffit largement pour un badge de statut ou une icône réutilisée dans plusieurs contextes d'une même interface.

filter (CSS) contre <filter> SVG

Le SVG dispose de son propre système de filtres, bâti sur des primitives comme feGaussianBlur ou feColorMatrix, déclarées dans un bloc <filter> à l'intérieur de <defs>, puis appliquées avec l'attribut filter="url(#monFiltre)" sur un élément SVG. C'est un outil beaucoup plus puissant, capable de combinaisons sur mesure impossibles à obtenir avec les fonctions CSS toutes faites, mais bien plus long à écrire pour un simple flou ou un simple noir et blanc. La propriété CSS filter peut d'ailleurs référencer un filtre SVG personnalisé de cette façon : filter: url(#monFiltre), ce qui permet de combiner la simplicité des fonctions CSS avec la puissance du système SVG quand c'est nécessaire.

Questions fréquentes

Non, il s'applique à n'importe quel élément, texte, boîte colorée ou vidéo compris, puisqu'il agit sur le rendu final plutôt que sur un type de contenu précis. Un titre entier peut par exemple recevoir un drop-shadow() sans jamais toucher à box-shadow.

Oui, et c'est l'un des usages les plus fréquents de la propriété : passer de grayscale(100%) à grayscale(0%) au survol, avec une transition déclarée sur filter, produit un effet de couleur qui revient progressivement, très utilisé sur des galeries d'images.

Non, ils répondent à des questions différentes. filter transforme le rendu de l'élément lui-même, indépendamment de ce qu'il y a derrière. mix-blend-mode mélange au contraire cet élément avec ce qui se trouve derrière lui, ce qui en fait un outil complémentaire plutôt qu'un substitut.