La propriété CSS filter permet d'appliquer des effets visuels comme un flou, une variation de luminosité ou une ombre portée. Dans ce cours, vous allez découvrir les filtres les plus utiles et apprendre à les combiner proprement.
À quoi sert la propriété filter ?
La propriété filter sert à modifier le rendu visuel d'un élément, sans changer son contenu HTML.
Elle est très souvent utilisée sur des images, mais elle peut aussi s'appliquer à d'autres éléments comme un bloc, une icône ou un bouton.
Concrètement, elle peut rendre un élément plus flou, plus clair, plus contrasté, plus gris, ou encore lui ajouter une ombre.
Attention ! Un filtre agit surtout sur l'apparence. Il ne remplace pas une vraie mise en page ni un vrai positionnement.
Si vous voulez revoir une autre propriété qui modifie le rendu sans changer la structure du HTML, vous pouvez relire le cours La propriété transform.
<img class="vignette" src="../images/banana.svg" alt="Banane">
.vignette{
filter: grayscale(100%);
}
Ici, les couleurs de départ sont conservées dans le code, mais l'affichage devient gris grâce au filtre appliqué.
blur
Le filtre blur() ajoute un flou sur l'élément.
Plus la valeur est grande, plus le flou est visible. On utilise le plus souvent une valeur en px.
.photo-floue{
filter: blur(4px);
}
Ce filtre est souvent utile pour un effet de survol, un arrière-plan adouci ou une image volontairement mise en retrait.
brightness
Le filtre brightness() permet d'agir sur la luminosité.
La valeur normale est 100% ou 1. En dessous, l'élément s'assombrit. Au-dessus, il s'éclaircit.
<img class="vignette-claire" src="../images/banana.svg" alt="Banane">
.vignette-claire{
filter: brightness(140%);
}
C'est pratique quand une image paraît trop sombre ou quand vous voulez renforcer légèrement un élément au survol.
contrast
Le filtre contrast() augmente ou diminue la différence entre les zones claires et les zones foncées.
Là encore, 100% correspond à la valeur normale. Une valeur plus élevée rend l'image plus marquée. Une valeur plus faible la rend plus plate.
.image-contrastee{
filter: contrast(180%);
}
Si vous forcez trop le contraste, le rendu peut vite devenir agressif. Il vaut mieux avancer par petites étapes.
drop-shadow
Le filtre drop-shadow() ajoute une ombre portée.
Sa syntaxe ressemble à celle de box-shadow : on indique un décalage horizontal, un décalage vertical, un flou éventuel et une couleur.
La différence importante, c'est que drop-shadow() suit mieux les formes visibles d'un élément déjà filtré ou transparent.
<img class="badge" src="../images/banana.svg" alt="Banane">
.badge{
filter: drop-shadow(6px 8px 6px rgba(0, 0, 0, 0.25));
}
Pour une ombre simple sur une boîte rectangulaire, box-shadow reste souvent suffisant. Mais pour des formes plus libres, drop-shadow() devient très intéressant.
grayscale
Le filtre grayscale() retire tout ou partie des couleurs pour aller vers le noir et blanc.
Une valeur de 0% conserve l'image telle quelle. Une valeur de 100% la rend complètement grise.
.image-grise{
filter: grayscale(100%);
}
Un usage classique consiste à afficher une image en noir et blanc, puis à lui rendre ses couleurs au survol.
hue-rotate
Le filtre hue-rotate() fait tourner les couleurs sur le cercle chromatique.
La valeur est un angle, le plus souvent en deg. Par exemple 90deg, 180deg ou 240deg.
Ce filtre ne change pas vraiment la luminosité. Il modifie surtout la teinte générale.
<img class="vignette-bleue" src="../images/banana.svg" alt="Banane">
.vignette-bleue{
filter: hue-rotate(180deg);
}
Le résultat peut être surprenant. C'est donc un filtre à tester visuellement plutôt qu'à deviner.
invert
Le filtre invert() inverse les couleurs.
Avec 100%, un fond clair devient foncé et une couleur sombre devient claire. Avec une valeur intermédiaire, l'effet est partiel.
.logo-inverse{
filter: invert(100%);
}
Ce filtre peut dépanner pour adapter rapidement une icône à un fond sombre, même si une vraie version prévue pour ce contexte reste souvent préférable.
opacity
Le filtre opacity() rend un élément plus ou moins transparent.
Une valeur de 100% laisse l'élément entièrement visible. Une valeur de 40% le rend beaucoup plus discret.
Si vous voulez seulement gérer la transparence, la propriété CSS opacity est souvent plus simple. En revanche, filter: opacity() devient pratique quand vous voulez enchaîner plusieurs filtres dans une seule déclaration.
saturate
Le filtre saturate() agit sur l'intensité des couleurs.
À 100%, le rendu est normal. En dessous, les couleurs deviennent plus ternes. Au-dessus, elles deviennent plus vives.
.image-vive{
filter: saturate(180%);
}
Comme pour le contraste, il faut rester mesuré. Une saturation trop forte donne vite un rendu artificiel.
sepia
Le filtre sepia() applique une coloration brun-jaune qui rappelle les anciennes photographies.
Une valeur de 100% produit l'effet complet. Une valeur plus faible donne un rendu plus discret.
.photo-vintage{
filter: sepia(100%);
}
Le filtre sépia est souvent utilisé pour créer une ambiance rétro ou pour adoucir une image moderne.
Appliquer plusieurs filtres
La propriété filter permet d'enchaîner plusieurs fonctions dans une seule déclaration.
Il suffit de les écrire les unes à la suite des autres, séparées par des espaces.
<img class="photo-retouchee" src="../images/banana.svg" alt="Banane">
.photo-retouchee{
filter: grayscale(100%) contrast(120%) brightness(90%);
}
Cette possibilité est très pratique, parce qu'elle évite d'avoir plusieurs propriétés différentes à gérer.
Attention tout de même : l'ordre des filtres peut influencer le rendu final. Si vous changez l'ordre, l'effet perçu peut changer lui aussi.
Retenez surtout ceci : commencez par un seul filtre, testez le résultat, puis ajoutez les autres un par un. C'est la meilleure méthode pour garder la main sur le rendu.