Filtros no CSS

Tempo de leitura: 3 minutos

Filtros no CSS: A propriedade filter no CSS permite aplicar efeitos gráficos, como desfoque (blur), saturação e brilho, diretamente a qualquer elemento HTML (imagens, texto, divs).

Essa técnica, originalmente inspirada nos filtros SVG, é otimizada pelo navegador e oferece flexibilidade para criar efeitos dinâmicos, interativos e até reativos a eventos como hover ou Modo Escuro.

1. Como Funciona a Propriedade `filter`

O filter aceita uma ou mais funções de filtro separadas por espaço. A ordem das funções importa, pois o resultado de uma função é alimentado na próxima.

🔑 Sintaxe: Aplicação em Série

CSS

.elemento-foto {
  /* Primeiro, aplica a escala de cinza; depois, ajusta o brilho */
  filter: grayscale(100%) brightness(1.5); 
}

2. As Funções de Filtro Essenciais

Os filtros podem ser broadly categorizados por sua função. A maioria aceita valores em porcentagem, decimais ou unidades específicas (px, deg).

A. Efeitos de Cor e Tonalidade

Função	Descrição	Valores Comuns	Exemplo
`grayscale()`	Converte para tons de cinza.	`0` (original) a `1` ou `100%` (preto e branco).	`filter: grayscale(0.8);`
`sepia()`	Aplica um tom sépia.	`0` a `1` ou `100%` (efeito total).	`filter: sepia(70%);`
`saturate()`	Ajusta a intensidade da cor.	`1` ou `100%` (original). `<100%` dessatura, `>100%` supersatura.	`filter: saturate(200%);`
`hue-rotate()`	Gira as cores no círculo cromático.	Ângulo em `deg` (graus).	`filter: hue-rotate(180deg);`
`invert()`	Inverte as cores.	`0` (original) a `1` ou `100%` (inversão total).	`filter: invert(1);`

B. Efeitos de Luz e Contraste

Função	Descrição	Valores Comuns	Exemplo
`brightness()`	Ajusta a luminância (brilho).	`1` (original). `0` (preto total), `>1` (mais brilho).	`filter: brightness(0.6);`
`contrast()`	Ajusta a diferença entre claro e escuro.	`1` (original). `0` (cinza total), `>1` (mais contraste).	`filter: contrast(150%);`

C. Efeitos de Foco e Sombras

Função	Descrição	Sintaxe / Valores	Exemplo
`blur()`	Aplica desfoque gaussiano.	Medida em `px`.	`filter: blur(5px);`
`drop-shadow()`	Cria uma sombra projetada.	`X Y [blur] [color]` (Semelhante a `box-shadow`).	`filter: drop-shadow(4px 4px 6px #000a);`

Nota Técnica: Embora o artigo original tenha listado opacity(), a função CSS opacity() é uma duplicata da propriedade opacity padrão do CSS e é raramente usada dentro do filtro, pois a propriedade opacity é mais performática e amplamente utilizada.

3. Exemplos Práticos de Aplicação

A. Efeito Hover de Escala de Cinza

Aplicar uma transição ao filtro garante que a mudança de estilo seja suave e não abrupta.

CSS

img {
  transition: filter 0.5s ease; /* Transição suave */
  filter: none; /* Estado inicial: sem filtro */
}

img:hover {
  /* No hover, aplica o efeito cinza */
  filter: grayscale(1) brightness(0.7); 
}

B. Múltiplos Filtros e Desfoque de Fundo

Filtros são poderosos quando combinados.

CSS

.card-de-alerta {
  /* Combina desfoque e um tom sépia para um visual de "documento antigo" */
  filter: sepia(0.5) blur(1px); 
}

C. Filtros para Acessibilidade

Você pode usar o CSS Condicional (@media) para aplicar filtros que ajudam na acessibilidade ou que respeitam as preferências do usuário.

CSS

/* Reduz o brilho da tela quando o Modo Escuro está ativo */
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.8);
  }
}

✅ Conclusão Filtros no CSS

A propriedade filter é uma maneira otimizada e flexível de adicionar flair visual aos seus projetos. Ao dominar funções como blur(), grayscale() e drop-shadow(), e ao combiná-las e animá-las com transition, você pode criar designs dinâmicos e de alta qualidade que reagem de forma elegante à interação do usuário.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: