Propriedade filter: Aplicando efeitos visuais (desfoque, saturação, etc.)

A propriedade filter é uma ferramenta poderosa do CSS que permite aplicar efeitos gráficos a um elemento, como desfoque, ajuste de cores, brilho, contraste e muito mais. É como ter um editor de fotos embutido no seu navegador, mas para qualquer elemento HTML!

Pense na propriedade filter como um conjunto de "lentes mágicas" que você pode colocar sobre seus elementos. Cada lente (blur(), grayscale(), saturate(), etc.) altera a forma como o elemento é visualizado, sem modificar o conteúdo original.

Como funciona a propriedade `filter`

A propriedade filter aceita uma ou mais funções de filtro como valor. Cada função descreve um efeito visual específico.

Sintaxe básica:

.elemento {
  filter: <funcao-filtro-1> <funcao-filtro-2> ...;
}

Exemplo:

.imagem-desfocada {
  filter: blur(5px) grayscale(100%);
}

Principais Funções de `filter` (2D)

Vamos explorar algumas das funções de filtro mais comuns e úteis.

1. `blur(raio)`: Desfoque

Aplica um efeito de desfoque gaussiano ao elemento.

raio: O valor do raio do desfoque, geralmente em px. Quanto maior o valor, maior o desfoque.
Ex: filter: blur(5px); (desfoca o elemento em 5 pixels).

2. `brightness(quantidade)`: Brilho

Ajusta o brilho do elemento.

quantidade: Um valor numérico ou porcentagem.
- 0% ou 0: O elemento fica completamente preto.
- 100% ou 1: O brilho original (padrão).
- Valores maiores que 100% aumentam o brilho.
Ex: filter: brightness(150%); (aumenta o brilho em 50%).
Ex: filter: brightness(0.5); (diminui o brilho pela metade).

3. `contrast(quantidade)`: Contraste

Ajusta o contraste do elemento.

quantidade: Um valor numérico ou porcentagem.
- 0% ou 0: O elemento fica completamente cinza.
- 100% ou 1: O contraste original (padrão).
- Valores maiores que 100% aumentam o contraste.
Ex: filter: contrast(200%); (dobra o contraste).

4. `grayscale(quantidade)`: Escala de Cinza

Converte o elemento para escala de cinza.

quantidade: Um valor numérico ou porcentagem.
- 0% ou 0: O elemento mantém suas cores originais (padrão).
- 100% ou 1: O elemento fica completamente em preto e branco.
Ex: filter: grayscale(100%); (converte para preto e branco).

5. `saturate(quantidade)`: Saturação

Ajusta a saturação das cores do elemento.

quantidade: Um valor numérico ou porcentagem.
- 0% ou 0: O elemento fica completamente dessaturado (preto e branco).
- 100% ou 1: A saturação original (padrão).
- Valores maiores que 100% aumentam a saturação.
Ex: filter: saturate(200%); (dobra a saturação das cores).

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedade filter</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f4f4f4;
      padding: 20px;
    }

    .image-container {
      width: 200px;
      height: 150px;
      overflow: hidden;
      border: 2px solid #ccc;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      position: relative;
    }

    .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: filter 0.4s ease-in-out; /* Transição suave para o filtro */
    }

    .image-container p {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0,0,0,0.5);
      color: white;
      padding: 5px 0;
      margin: 0;
      text-align: center;
      font-size: 0.9em;
    }

    /* --- Exemplos de filter --- */

    .filter-blur img:hover {
      filter: blur(8px); /* Desfoque ao passar o mouse */
    }

    .filter-brightness img:hover {
      filter: brightness(1.8); /* Aumenta o brilho */
    }

    .filter-contrast img:hover {
      filter: contrast(200%); /* Dobra o contraste */
    }

    .filter-grayscale img:hover {
      filter: grayscale(100%); /* Converte para preto e branco */
    }

    .filter-saturate img:hover {
      filter: saturate(300%); /* Aumenta a saturação */
    }

    .filter-combined img:hover {
      filter: blur(3px) brightness(1.2) grayscale(50%); /* Combinação de filtros */
    }
  </style>
</head>
<body>
  <div class="image-container filter-blur">
    <img src="https://via.placeholder.com/300x200/2196F3/FFFFFF?text=Imagem+1" alt="Imagem 1">
    <p>Desfoque</p>
  </div>
  <div class="image-container filter-brightness">
    <img src="https://via.placeholder.com/300x200/4CAF50/FFFFFF?text=Imagem+2" alt="Imagem 2">
    <p>Brilho</p>
  </div>
  <div class="image-container filter-contrast">
    <img src="https://via.placeholder.com/300x200/FFC107/FFFFFF?text=Imagem+3" alt="Imagem 3">
    <p>Contraste</p>
  </div>
  <div class="image-container filter-grayscale">
    <img src="https://via.placeholder.com/300x200/9C27B0/FFFFFF?text=Imagem+4" alt="Imagem 4">
    <p>Escala de Cinza</p>
  </div>
  <div class="image-container filter-saturate">
    <img src="https://via.placeholder.com/300x200/00BCD4/FFFFFF?text=Imagem+5" alt="Imagem 5">
    <p>Saturação</p>
  </div>
  <div class="image-container filter-combined">
    <img src="https://via.placeholder.com/300x200/FF5722/FFFFFF?text=Imagem+6" alt="Imagem 6">
    <p>Combinado</p>
  </div>
</body>
</html>

Resultado:

Passe o mouse sobre cada imagem para ver os efeitos de filter em ação.
Observe como a imagem "Combinado" aplica múltiplos filtros de uma vez.

Pontos Chave:

Não afeta o layout: Assim como transform, filter é uma alteração puramente visual e não afeta o espaço que o elemento ocupa no fluxo do documento.
Performance: Os filtros CSS são geralmente otimizados pelo navegador e executados na GPU, o que os torna performáticos para animações.
Combinação: Você pode aplicar múltiplos filtros a um único elemento, listando-os separados por espaço. A ordem pode influenciar ligeiramente o resultado, mas geralmente é menos crítica do que em transform.
transition: Para ver os filtros aplicados de forma suave, é essencial combiná-los com a propriedade transition.

A propriedade filter é uma ferramenta incrível para adicionar estilo e interatividade visual aos seus designs, permitindo que você crie efeitos que antes exigiam edição de imagem ou JavaScript complexo.

Como funciona a propriedade filter

Principais Funções de filter (2D)

1. blur(raio): Desfoque

2. brightness(quantidade): Brilho

3. contrast(quantidade): Contraste

4. grayscale(quantidade): Escala de Cinza

5. saturate(quantidade): Saturação