Planos a partir de R$ 39/mês Inscreva-se Agora

Imagem em Preto e Branco com CSS

Com a propriedade filter do CSS, você consegue mudar as cores de uma imagem para preto e branco.

See the Pen ezBPpr by André | Origamid (@origamid) on CodePen.

É bem simples basta utilizar o código:


img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE */
}

Já é bem suportado nos browsers modernos, porém é necessário o uso do prefixo -webkit- para Chrome e outros que utilizam o webkit.

Não se limite a utilizar apenas em fotos, você pode utilizar também na marca de parceiros, clientes e outras imagens.

Assim você evita uma poluição de cores, causada quando adicionamos diversas marcas para mostrarmos com quem já trabalhamos.

PS: Você vai encontrar esse código pela Web com gambiarras utilizando SVG para funcionar no Firefox. Porém não é mais necessário isso.

Mais Dicas