grayscale()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

O grayscale() é uma função do CSS que modifica a imagem adicionada para as cores branco e preto . Esse resultado é um efeito "filtro". <filter-function>.

Experimente

filter: grayscale(0);

filter: grayscale(0.2);

filter: grayscale(60%);

filter: grayscale(1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Sintaxe

grayscale(quantidade)

Parâmetros

quantidade: A quantia da conversão é especificada em <number> (número) ou <percentage> (porcentagem). Um valor de 100% indica que a cor está compeltamente dentro da escala de cinza. Um valor de 0% não altera as cores da imagem, que permanecerá igual a original. Valores entre 0% e 100% são multiplicadores lineares no efeito cinza, modificando a escala de cores conforme a quantidade determinada. A quantia em número é equivalente a em porcentagem.

css

grayscale(0)     /* Não afeta a imagem */
grayscale(.7)    /* .7 => 70% de branco&preto */
grayscale(100%)  /* Completamente em branco&preto */

Veja também

<filter-function>