Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété filter

Description de la propriété filter.

filter applique un effet visuel à un élément, le plus souvent une image : effet de flou, symétrie, éclaircissement, etc.

filter s'applique sur le visuel complet de l'élément, incluant son contenu, son arrière-plan, sa bordure et, éventuellement, ses barres de défilement s'il en existe. Cependant les différents filtres graphiques ne changent pas les dimensions de l'élément, même si le traitement conduit à dessiner quelque chose à l'extérieur de l'élément (une ombre par exemple).

Syntaxes pour filter.

  • filter: none;
    Exemple

    Valeur par défaut. Aucun traitement n'est appliqué à l'élément.

  • filter: blur(5px);
    Exemple

    Applique un flou gaussien au visuel de l'élément. Plus le nombre indiqué est important, plus le flou sera prononcé.
    Voir la fonction blur().

  • filter: brightness(90%);
    Exemple

    Ajuste la luminosité de l'élément.
    La valeur doit être supérieur à 0%. Une valeur supérieure à 100% éclaircit l'image tandis qu'une valeur entre 0 et 100% assombrit l'image.
    Voir la fonction brightness().

  • filter: contrast(50%);
    Exemple

    Ajuste le contraste du visuel de l'élément.
    Une valeur supérieure à 100% augmente le contraste ; une valeur inférieure à 100% réduit le contraste : l'image prend une teinte grisâtre.
    Voir la fonction contrast().

  • filter: drop-shadow(...);
    Exemple

    Ajoute une ombre portée. Cet effet ne modifie pas directement le contenu de l'élément mais plutôt son bloc.
    Object accepte de 2 à 5 paramètres. Pour une description détaillée de la syntaxe, reportez-vous à la page de la fonction drop-shadow().

  • filter: grayscale(100%);
    Exemple

    Convertit le visuel de l'élément en niveau de gris (image monochrome).
    La valeur est valide de 0% à 100%. Une valeur inférieure à 100% effectue une conversion partielle. Les valeurs supérieures à 100% ne sont pas autorisées ou n'ont pas plus d'effet que 100%.
    Voir la fonction grayscale().

  • filter: hue-rotate(90deg);
    Exemple

    Provoque une rotation des couleurs de l'élément.
    La valeur est valide entre 0deg et 360deg. 0deg ne change pas l'image.
    Voir la fonction hue-rotate().

  • filter: invert(100%);
    Exemple

    Crée un négatif du visuel de l'élément. La valeur est valide de 0% à 100%. Les valeurs inférieures à 100% produisent une conversion partielle en négatif.
    Voir la fonction invert().

  • filter: opacity(50%);
    Exemple

    Rend l'élément partiellement transparent.
    La valeur est valide de 0% à 100%. 0% correspond à une image totalement transparente et 100% à une image sans transparence.
    Voir la fonction opacity().
    Remarque : voir aussi la propriété CSS (opacity()) qui a un effet comparable.

  • filter: saturate(150%);
    Exemple

    Augmente ou réduit la saturation des couleurs de l'élément.
    La valeur doit être supérieure ou égale à 0%. 0% correspond à une image totalement grise, 100% à l'image originale sans changement, une valeur supérieure à 100% sursature l'image.
    Voir la fonction saturate().

  • filter: sepia(100%);
    Exemple

    Convertit le visuel de l'élément en sépia.
    La valeur est valide de 0% à 100%. Une valeur inférieure à 100% effectue une conversion partielle. Les valeurs supérieures à 100% ne sont pas autorisées ou n'ont pas plus d'effet que 100%.
    Voir la fonction sepia().

  • filter: url(...);

    Applique à l'élément les transformations décrites dans un fichier SVG.

  • filter: sepia(50%) blur(2px);
    Exemple

    Il est possible de définir plusieurs effets à appliquer à l'aspect visuel de l'élément : il suffit de décrire les effets souhaités en les séparant par un espace. Ils seront appliqués dans l'ordre où ils sont écrits.

  • filter: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Remarque : d'autres transformations avaient été implémentées par certains navigateurs (en particulier Internet Explorer) mais n'ont pas été normalisées : symétrie, effet halo, etc. Les traitements tels que la symétrie sont maintenant réalisés par la propriété CSS transform.

Simulateur.

filter :
Effet sur du texte
Effet sur une image
Exemple pour la propriété CSS filter

Prise en charge par les navigateurs (compatibilité).

Internet Explorer ne traite pas la propriété filter. Edge ne la traite que partiellement.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Images et filtres - Propriétés.

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
  • image-rendering : Mode de mise à l'échelle des images.
  • mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

Images et filtres - Fonctions.

  • blur() : Applique un effet de flou à une image.
  • brightness() : Ajuste la luminosité d'une image.
  • contrast() : Ajuste le contraste d'une image.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • grayscale() : Convertit une image en nuances de gris (noir et blanc).
  • hue-rotate() : Change les couleurs d'une image (rotation des teintes).
  • image() : Désigne ou définit une image.
  • inset() : Définit un rectangle, utilisable pour découper une image.
  • invert() : Inverse les couleurs d'une image.
  • opacity() : Détermine le degré de transparence d'un élément.
  • saturate() : Définit la saturation des couleurs d'une image.
  • sepia() : Applique un effet sépia à une image.