Como criar: adicionar efeitos de imagem

Aprenda a adicionar efeitos visuais às imagens.

Filtros CSS

CSS filter O atributo adiciona efeitos visuais aos elementos (como desfoque e saturação).

Atenção:Internet Explorer, Edge 12 ou Safari 5.1 e versões anteriores não suportam filter Atributo.

Exemplo de escuro

Mudar a cor de todas as imagens para preto e branco (100% cinza):

Imagem original

Escuro (100%)

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Experimente você mesmo

Exemplo de desfoque

Aplicar efeito de desfoque a todas as imagens:

Imagem original

Processamento de desfoque (5 pixels)

img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

Experimente você mesmo

Páginas relacionadas

Manual de referência:Propriedade de filtro CSS