A propriedade CSS filter é uma ferramenta poderosa que permite aplicar efeitos gráficos a elementos em uma página web. É particularmente útil para ajustar a apresentação visual de imagens, fundos e até texto sem modificar o recurso original. A propriedade filter pode ser usada para criar vários efeitos, como desfoque, alteração de cor e ajustes de contraste. Vamos discutir como a propriedade filter funciona e explorar alguns exemplos comuns. A sintaxe básica para a propriedade filter é simples:

selector {
  filter: function(amount);
}

Aqui, function representa o efeito de filtro específico que você deseja aplicar e amount é tipicamente um valor que determina a intensidade do efeito. Agora vamos ver algumas funções de filtro comuns e seus usos.

<link rel="stylesheet" href="styles.css">
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

img {
  filter: blur(2px);
}

A função blur aplica um desfoque Gaussiano ao elemento, a quantidade é especificada em pixels e representa o raio do desfoque. Esta regra CSS aplicará um desfoque de 2 pixels a todas as imagens na página. O efeito blur pode ser útil para criar profundidade no seu design ou para obscurecer partes de uma imagem. A função brightness ajusta o brilho do elemento. Um valor de 0% fará com que o elemento fique completamente preto, enquanto valores acima de 100% aumentarão o brilho.

<link rel="stylesheet" href="styles.css">
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

img {
  filter: brightness(150%);
}

Esta regra CSS aumenta o brilho do elemento de imagem em 50%. Ajustes de brilho podem ser usados para destacar imagens ou criar um efeito desbotado. A função grayscale converte o elemento para escala de cinza. O valor é definido como uma porcentagem, onde 100% é completamente em escala de cinza e 0% deixa a imagem inalterada.

<link rel="stylesheet" href="styles.css">
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

img {
  filter: grayscale(100%);
}

Esta regra converterá o elemento de imagem para escala de cinza total. grayscale pode ser usado para criar um visual vintage ou para desvalorizar certos elementos em uma página. A função sepia aplica um tom sépia ao elemento. Como escala de cinza, ele usa um valor percentual:

<link rel="stylesheet" href="styles.css">
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

img {
  filter: sepia(80%);
}

Esta regra aplica um efeito sépia de 80% ao elemento de imagem. O efeito sépia é ótimo para criar um visual vintage ou antigo. A função hue-rotate aplica uma rotação de matiz ao elemento. O valor é definido em graus e representa uma rotação ao redor do círculo de cores.

<link rel="stylesheet" href="styles.css">
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

img {
  filter: hue-rotate(90deg);
}

Esta regra rotaciona a matiz do elemento de imagem em 90 graus. A rotação da matiz pode ser usada para criar efeitos psicodélicos ou para ajustar o esquema geral de cores de uma imagem. Um dos aspectos mais poderosos da propriedade filter é a capacidade de combinar múltiplos efeitos. Você pode aplicar vários filtros ao mesmo elemento separando-os com espaços:

<link rel="stylesheet" href="styles.css">
<img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

img {  
  filter: contrast(150%) brightness(110%) sepia(30%);  
}

Esta regra aplica contraste aumentado, brilho ligeiramente aumentado e um sutil efeito sépia ao elemento da imagem. Ao combinar filtros, você pode criar efeitos visuais complexos e únicos adaptados às suas necessidades de design. A propriedade CSS filter é uma ferramenta versátil que permite a manipulação visual criativa de elementos web. Embora tenhamos abordado algumas das funções de filtro mais comuns, existem outras disponíveis, como contrast, invert e saturate. Como em qualquer recurso poderoso, é importante ter cuidado com a forma como você usa os filtros para melhorar seu design sem sobrecarregar seus usuários ou comprometer a acessibilidade.