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 - Fonction grayscale()

Description de la fonction grayscale().

La fonction grayscale() atténue les couleurs d'un élément, en totalité ou partiellement. On obtient donc un élément restitué en nuances de gris, communément appelée "image en noir et blanc".

La fonction saturate() permet d'obtenir un effet comparable, mais avec quelques différences:

  • Les valeurs sont inversées : saturate(0) est équivalent à grayscale(100%)
  • saturate() peut agir dans les deux sens : atténuation ou renforcement des couleurs. Ce qui n'est pas le cas de grayscale() qui ne peut que atténuer les couleurs.
  • Les formules de calcul utilisées par ces deux fonctions sont différentes.

La fonction grayscale() peut être utilisée avec :

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • filter : Filtre graphique.

Syntaxe de la fonction grayscale().

  • filter: grayscale(50%); n

    n est un nombre sans unité compris entre 0 et 1, ou un pourcentage compris entre 0% et 100%. Cette valeur indique le taux de conversion.
    0% ne change rien à l'élément, tandis que 1 ou 100% provoque une dé-saturation totale de son image (remplacement de toutes les couleurs par des nuances de gris).

Simulateur.

filter:
( valeur )
Effet sur du texte

Démo pour la fonction grayscale()

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...)
  • filter : Filtre graphique.
  • 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).
  • 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.