Propriété CSS filter
La propriété CSS filter applique des effets graphiques à un élément. Découvrez les valeurs et voyez les effets illustrés dans les exemples.
La propriété CSS filter applique des effets graphiques — tels que le flou, le décalage de couleur ou l'ombre — à un élément lors de son rendu, sans modifier la source sous-jacente. Elle est le plus souvent utilisée sur les images, mais fonctionne sur n'importe quel élément, y compris le texte, les arrière-plans et les SVG.
Ce chapitre couvre chaque fonction de filtre acceptée par la propriété, la manière de combiner plusieurs filtres dans une seule déclaration, et les cas pratiques où les filtres surpassent les alternatives.
Quand utiliser la propriété filter
Utilisez filter lorsque vous souhaitez un effet visuel que le navigateur calcule à partir des pixels existants de l'élément :
- Assombrir ou teinter une image de héros derrière du texte (
brightness,grayscale,sepia) plutôt que de modifier l'image dans un éditeur. - Adoucir un arrière-plan (
blur) pour que le contenu au premier plan reste lisible. - Attirer l'attention au survol en supprimant un filtre niveaux de gris pour révéler les couleurs complètes.
- Ajouter une ombre qui suit la transparence avec
drop-shadow— contrairement àbox-shadow, elle épouse la forme à l'intérieur d'un PNG/SVG plutôt que sa boîte rectangulaire.
Comme les filtres s'exécutent sur le GPU et n'affectent que la présentation, ils s'animent fluidement et ne modifient jamais le fichier source, ce qui les rend idéaux pour les transitions et les états au survol.
La propriété filter accepte ces fonctions :
noneblur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. |
| Héritage | Non. |
| Animatable | Oui. |
| Version | CSS3 |
| Syntaxe DOM | object.style.filter = "hue-rotate(360deg)"; |
Syntaxe
Syntaxe de la propriété CSS filter
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;Exemples
Exemple de la propriété filter avec la valeur "blur" :
Exemple de la propriété CSS filter avec la valeur blur
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: blur(3px);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter property example</h2>
<p>For this image the filter is set to "blur(3px)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Résultat
Exemple d'utilisation de la propriété filter pour rendre l'image plus lumineuse :
Exemple de la propriété CSS filter avec la valeur brightness
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: brightness(150%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter property example</h2>
<p>For this image the filter is set to "brightness(150%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Dans l'exemple suivant, la valeur "grayscale" rend l'image en niveaux de gris :
Exemple de la propriété filter avec la valeur "grayscale" :
Exemple de la propriété CSS filter avec la valeur grayscale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: grayscale(80%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "grayscale(80%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Ici, le filtre "saturate" est appliqué à l'image avec une valeur de 300%.
Exemple de la propriété filter avec la valeur "saturate" :
Exemple de la propriété CSS filter avec la valeur saturate
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: saturate(300%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "saturate(300%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemple de la propriété filter avec la valeur "sepia" :
Exemple de la propriété filter avec la valeur sepia
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: sepia(70%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "sepia(70%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemple de la propriété filter avec la valeur "contrast" :
Exemple de la propriété CSS filter avec la valeur contrast
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: contrast(40%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "contrast(40%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemple de la propriété filter avec la valeur "opacity" :
Exemple de la propriété CSS filter avec la valeur "opacity"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: opacity(0.4);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "opacity(0.4)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemple de la propriété filter avec la valeur "invert" :
Exemple de la propriété CSS filter avec la valeur "invert"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: invert(0.7);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "invert(0.7)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemple de la propriété filter avec la valeur "hue-rotate" :
Exemple de la propriété CSS filter avec la valeur "hue-rotate"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: hue-rotate(90deg);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "hue-rotate(90deg)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Exemple de la propriété filter avec la valeur "drop-shadow" :
drop-shadow() prend les mêmes arguments que la propriété box-shadow — offset-x, offset-y, un rayon de flou optionnel et une couleur — mais elle épouse la forme non transparente de l'image plutôt que sa boîte englobante. C'est pourquoi il s'agit du bon choix pour les icônes PNG et les SVG avec transparence.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: drop-shadow(8px 8px 10px gray);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "drop-shadow(8px 8px 10px gray)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Combiner plusieurs filtres
Vous pouvez appliquer plusieurs fonctions de filtre dans une seule déclaration en les listant, séparées par des espaces. Ils sont appliqués dans l'ordre d'écriture, de sorte que le résultat de l'un alimente le suivant — les réordonner peut modifier le résultat.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: grayscale(100%) brightness(120%) blur(2px);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>
This image is first turned to grayscale, then brightened, then blurred.
</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Comme filter est animatable, l'associer à une transition est un schéma courant — par exemple, faire passer une photo en niveaux de gris aux couleurs complètes au survol :
img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(0%);
}Points importants à garder à l'esprit
- Un filtre crée un contexte d'empilement et (avec autre chose que
none) un bloc conteneur pour les descendants — cela peut affecter la disposition des enfants positionnés en absolu etfixed. - Les valeurs
blur()élevées sont coûteuses. Les grands rayons de flou sur de grands éléments peuvent nuire aux performances de défilement, en particulier sur mobile. opacity()vs la propriétéopacity: la fonction de filtre applique l'opacité dans le cadre du pipeline de filtres, tandis que la propriétéopacityautonome est plus simple et légèrement mieux prise en charge — préférez la propriété sauf si vous la combinez avec d'autres filtres.- Pour filtrer ce qui se trouve derrière un élément translucide (effet verre dépoli), vous avez besoin de
backdrop-filter, une propriété distincte —filtern'affecte que les pixels propres à l'élément.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| none | N'applique aucun effet. Il s'agit de la valeur par défaut de cette propriété. | Essayer » |
| blur | Applique un flou à une image. Elle est spécifiée par une valeur de longueur. Plus la valeur est grande, plus le flou est prononcé. Si aucune valeur n'est appliquée, 0 est utilisé. | Essayer » |
| brightness | Rend l'image plus lumineuse. Si la valeur est 0, l'image sera noire. 100% est la valeur par défaut et affiche l'image originale. Les valeurs supérieures à 100% rendent l'image plus lumineuse. | Essayer » |
| contrast | Ajuste le contraste d'une image. Si la valeur est 0, l'image sera noire. 100% est la valeur par défaut et affiche l'image originale. Les valeurs supérieures à 100% appliquent plus de contraste à l'image. | Essayer » |
| drop-shadow | Applique un effet d'ombre portée sur l'image. | Essayer » |
| grayscale | Convertit l'image en niveaux de gris. 0% correspond à la valeur de l'image originale. 100% rend l'image entièrement grise. Les valeurs négatives ne sont pas autorisées. | Essayer » |
| hue-rotate | Applique un effet de rotation de teinte sur l'image. Elle est spécifiée en degrés. La valeur maximale est 360 degrés. | Essayer » |
| invert | Inverse les échantillons de l'image. 0 est la valeur par défaut. 100% rend l'image complètement inversée. | Essayer » |
| opacity | Définit le niveau d'opacité de l'image. Décrit la transparence de l'image. Si la valeur est 0, l'image est complètement transparente. 100% correspond à l'état actuel de l'image. | Essayer » |
| saturate | Applique un effet de saturation sur l'image. 0% rend l'image complètement désaturée. 100% est la valeur par défaut de l'image. Les valeurs supérieures à 100% rendent l'image super-saturée. | Essayer » |
| sepia | Convertit l'image en sépia. La valeur par défaut est 0%, 100% rend l'image complètement en sépia. | Essayer » |
| url | La fonction url() prend l'emplacement d'un fichier SVG qui spécifie un filtre, et peut inclure une ancre vers un élément de filtre spécifique. | |
| initial | Rend la propriété à sa valeur par défaut. | |
| inherit | Hérite la propriété de son élément parent. |