É uma propriedade que aplica efeitos gráficos como blur, ajuste de cor, saturação e sombra sobre um elemento inteiro. Funciona em imagens, texto, ícones e qualquer elemento HTML.
Gerador de Filtros CSS
Ajuste brilho, contraste, saturação, blur e mais — copie o filter CSS pronto com preview real.
A propriedade filter do CSS aplica efeitos visuais processados pelo GPU do dispositivo — suave, performático e sem arquivo extra.
O CSS `filter` aceita uma lista de funções que são aplicadas em cascata sobre o elemento e seus descendentes: `blur()` suaviza bordas, `brightness()` e `contrast()` controlam exposição e drama, `grayscale()` remove saturação, `hue-rotate()` muda a tonalidade preservando luminosidade e saturação, `sepia()` aquece em tons marrons históricos, `invert()` inverte o mapa de cores. `drop-shadow()` é diferente do `box-shadow` — ele respeita a forma do conteúdo real, inclusive PNG transparente. Os filtros são processados pelo compositor gráfico, o que os torna eficientes mesmo em animações, especialmente quando o elemento tem `will-change: filter`.
Ajuste cada filtro com sliders e veja o resultado em tempo real.
- Mova os sliders para ajustar cada função de filtro. Os sliders com valores diferentes do padrão são destacados para facilitar a leitura.
- Aplique um preset como ponto de partida e refine os valores manualmente.
- Copie o CSS gerado e aplique na sua folha de estilos. Use `filter` na classe ou elemento desejado.
Fontes e referências desta ferramenta
Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
