Propriedade Filter
Última atualização: 2026-09-13
filter Propriedade Filter
A propriedade filter aplica efeitos gráficos a um elemento — como desfoque, brilho, contraste e escala de cinza — semelhante aos filtros do Photoshop. Ela atua na saída renderizada do elemento e afeta tanto o elemento quanto todos os seus filhos, tornando-se uma ferramenta comum para processamento de imagens e efeitos visuais.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
filter: none | <filter-function>+;
/* <filter-function> = blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() */⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem filtro |
<filter-function> | Tipo | blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia ou url() |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| filter | ✓ v53 | ✓ v12 | ✓ v35 | ✓ v9.1 | ✓ v40 |
| Suportado em todos os principais navegadores | |||||
Dica： Várias funções de filtro podem ser usadas de uma vez, separadas por espaços, e são aplicadas em ordem.
Aviso： O filter afeta o elemento e todos os seus filhos; se você quiser apenas desfocar o fundo sem afetar o conteúdo em primeiro plano, use backdrop-filter.
❓ Perguntas Frequentes
QTanto filter quanto opacity podem ajustar a transparência — qual é a diferença?
AO opacity apenas ajusta a transparência geral do elemento e cria um contexto de empilhamento. O filter: opacity(50%) é um elo em uma cadeia de filtros e pode ser combinado com outros filtros como blur ou saturate. Ambos disparam composição na GPU, mas o opacity tem um caminho de otimização dedicado — prefira opacity simples para mudanças de transparência simples e use filter para efeitos compostos.
QA propriedade filter do CSS afeta o desempenho de renderização e os FPS?
ASim. Filtros caros como blur() e drop-shadow() disparam uma computação pesada por pixel e podem derrubar quadros em muitos elementos ou em dispositivos de baixo desempenho; brilho, contraste e saturação são comparativamente baratos. Recomendações: aplique filtros apenas de forma estática ou no hover, evite desfocar vários elementos grandes de uma vez, use imagens pré-renderizadas em vez de filtros ao vivo quando for crítico e teste nos dispositivos de destino.
QQual é a diferença entre filter e backdrop-filter no CSS?
AO filter aplica-se ao próprio elemento e a todo o seu conteúdo — por exemplo, desfocando uma imagem inteira. O backdrop-filter aplica-se ao conteúdo atrás do elemento, produzindo um efeito de vidro fosco, comumente usado em barras de navegação e fundos de modal, enquanto o texto em primeiro plano permanece nítido. O backdrop-filter tem suporte de navegador um pouco menor e custo de desempenho maior, e os dois são frequentemente combinados para uma camada de interface refinada.
QComo deixo uma imagem em escala de cinza e restauro a cor no hover?
AUse grayscale(): defina filter: grayscale(100%) por padrão e alterne para grayscale(0) ou none no hover, depois adicione transition: filter 0.3s para uma mudança de cor suave. Essa interação muito comum de cinza para cor é usada em páginas de homenagem, avatares desabilitados e efeitos de hover em murais de imagens, e custa quase nada para implementar.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
