Como - Adicionar efeitos de imagem
Aprenda como adicionar efeitos visuais às imagens.
Filtros de imagem
Filtros CSS
A propriedade CSS filter
adiciona efeitos visuais (como desfoque e saturação) a um elemento.
Observação: a propriedade de filtro não é compatível com Internet Explorer, Edge 12 ou Safari 5.1 e versões anteriores.
Exemplo de escala de cinza
Altere a cor de todas as imagens para preto e branco (100% cinza):
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Original image
grayscale(100%)
Exemplo de desfoque
Aplique um efeito de desfoque a todas as imagens:
img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
Original image
blur(5px)
Acesse nossa propriedade de filtro CSS para saber mais sobre filtros CSS.