Sommaire de l'article
Dernière mise à jour de l'article : mars 2021
Les filtres CSS c'est quoi ?
Les filtres CSS permettent d'appliquer des effets sur des images directement dans votre document HTML. Plus besoin de passer par un éditeur graphique.
Selon la spécification , il existe trois types de filtres :
- -Les filtres raccourcis (voir la liste plus bas)
- -Les filtres SVG
- -Les shaders : il existe deux types de shader. Les "vertex shaders" (.vs), permettant le déplacement et la déformation des sommets d'un polygone. Les "fragment shaders"(.fs), qui permettent de modifier le rendu des pixels d'un objet.
Liste des filtres :
Pour ce faire, on utilisera la propriété CSS filter
. Il existe dix filtres natifs, listés ci-dessous :
Actuellement, Chrome supporte parfaitement les filtres CSS, de même que le navigateur Opera depuis la version 26 ainsi que Firefox, depuis la version 35. Vous pouvez vérifier la compatibilité sur Can I Use .
Effet grayscale
Effet blur
Effet sépia
Effet hue-rotate
Effet drop-shadow
Effet invert
Effet brightness
Effet opacity
Effet contrast
Effet saturate
Syntaxe des filtres CSS :
La syntaxe est assez simple, comme vous pouvez le voir :
/*effet grayscale*/
.effet-grayscale{
-webkit-filter: grayscale(100%)/*préfixe jusqu'à la version 49*/;
filter: url(grayscale.svg#grayscale) /*filtre svg pour Firefox version inferieure a 35*/;
filter: grayscale(100%) /*syntaxe finale*/
}
/*effet flou*/
.effet-flou{
-webkit-filter: blur(2px)/*préfixe jusqu'à la version 49*/;
filter: url(flou.svg#blur)/*filtre svg pour Firefox version inferieure a 35*/;
filter: blur(2px) /*syntaxe finale*/
}
/*effet sepia*/
.effet-sepia{
-webkit-filter: sepia(1)/*préfixe jusqu'à la version 49*/;
filter: url(sepia.svg#sepia);/*filtre svg pour Firefox version inferieure a 35*/
filter: sepia(1) /*syntaxe finale*/
}
/*effet hue-rotate*/
.effet-hue-rotate{
-webkit-filter: hue-rotate(90deg)/*préfixe jusqu'à la version 49*/;
filter: url(hue-rotate.svg#hue-rotate)/*filtre svg pour Firefox version inferieure a 35*/;
filter: hue-rotate(90deg) /*syntaxe finale*/
}
/*effet ombre portee*/
.effet-drop-shadow{
-webkit-filter: drop-shadow(12px 12px 7px hsla(0,0%,0%,.5))/*préfixe jusqu'à la version 49*/;
filter: url(ombre.svg#ombre)/*filtre svg pour Firefox version inferieure a 35*/;
filter: drop-shadow(10px 10px 5px rgba(0,0,0,.8)) /*syntaxe finale*/
}
/*effet invert*/
.effet-invert{
-webkit-filter: invert(1)/*préfixe jusqu'à la version 49*/;
filter: url(invert.svg#invert)/*filtre svg pour Firefox version inferieure a 35*/;
filter: invert(1) /*syntaxe finale*/
}
/*effet brightness*/
.effet-brightness{
-webkit-filter: brightness(.5)/*préfixe jusqu'à la version 49*/;
filter: url(brightness.svg#brightness)/*filtre svg pour Firefox version inferieure a 35*/;
filter: brightness(.5) /*syntaxe finale*/
}
/*effet opacity*/
.effet-opacity{
-webkit-filter: opacity(.5)/*préfixe jusqu'à la version 49*/;
filter: url(opacity.svg#opacity)/*filtre svg pour Firefox version inferieure a 35*/;
filter: opacity(50%) /*syntaxe finale*/
}
/*effet contrast*/
.effet-contrast{
-webkit-filter: contrast(200%)/*préfixe jusqu'à la version 49*/;
filter: url(contrast.svg#contrast)/*filtre svg pour Firefox version inferieure a 35*/;
filter: contrast(200%) /*syntaxe finale*/
}
/*effet saturate*/
.effet-saturate{
-webkit-filter:saturate(.3)/*préfixe jusqu'à la version 49*/;
filter:url(saturate.svg#saturate)/*filtre svg pour Firefox version inferieure a 35*/;
filter:saturate(.3) /*syntaxe finale*/
}
Mise en pratique
Sachez que l'on peut combiner plusieurs valeurs à un filtre, comme dans l'exemple ci-dessous (sepia
et blur
) :

img{
filter: sepia(1) blur(2px)
}
Une fonction parmi celles évoquées est autrement intéressante. Il s'agit de drop-shadow
. Elle équivaut à la propriété CSS box-shadow
, mais contrairement à cette dernière qui applique une ombre rectangulaire sur un élément, le filtre drop-shadow
s’adapte aux contours des formes.
Exemple drop-shadow
:
img{filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.56))}
A titre de comparaison, on applique un box-shadow
en CSS à la même image :

Animations et filtres CSS
Animation filtre CSS
Animation filtre CSS
/*animations*/
.effet-anim{
animation: filter-animation 2s infinite;
-webkit-animation: filter-animation 2s infinite
}
.effet-anim1{
animation: filter-animation1 5s infinite;
-webkit-animation: filter-animation1 5s infinite
}
@keyframes filter-animation{
0%{
filter: sepia(0);
-webkit-filter:sepia(0)
}
50%{
filter: sepia(1);
-webkit-filter: sepia(1)
}
100%{
filter: sepia(0);
-webkit-filter: sepia(0)
}
}
@keyframes filter-animation1{
0%{
filter: sepia(0) saturate(2);
-webkit-filter: sepia(0) saturate(2)
}
50%{
filter: sepia(1) saturate(8);
-webkit-filter: sepia(1) saturate(8)
}
100%{
filter: sepia(0) saturate(2);
-webkit-filter: sepia(0) saturate(2)
}
}
backdrop-filter
Encore en l'état de brouillon dans le deuxième niveau du module des effets de filtre, la propriété backdrop-filter
permet d'appliquer des filtres CSS sur des arrières-plan.
.cadre_back{
background: url(image);
height: 279px;
width: 420px;
display: flex;
margin: 2rem auto;
}
.interieur_cadre {
width: 100%;
height: 100%;
display: flex;
align-items: center;
background: linear-gradient(to left,hsla(152,100%,50%,.4) 0, hsla(250,100%,69%,.4));
-webkit-backdrop-filter: blur(1px); /*safari ios safari*/
backdrop-filter: blur(1px); /*chrome opera*/
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
NB : l’arrière-plan sur lequel on applique la propriété backdrop-filter
doit impérativement être semi-transparent. Pas de support prévu pour Firefox mais en considération pour Edge.
Source, inspiration, ressources :
En complément, je vous invite à jeter un oeil sur cet article concernant les modes de fusion d'images en CSS.
Voir aussi sur ce blog les filtres SVG (revoir lien)
Exemple filtres et transitions CSS
Article sur les filtres CSS (FR)
CSS Custom Filters : filtres avancés
Une autre façon de recréer l'effet flou sur texte en CSS3 .
Article sur la propriété backdrop-filter
Article (EN) sur CSS shaders
Exemple shape blobbing (FR) en CSS.
Article très intéressant sur les performances et les filtres CSS (EN) .
Filtres Instagram (EN) en CSS
Vous rencontrez un problème avec cet article ?
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.