Neste artigo
Propriedade CSS filter explicada
A propriedade CSS filter aplica efeitos gráficos como desfoque, brilho, contraste e mudanças de cor a qualquer elemento HTML. Funciona em imagens, fundos, texto e até seções inteiras de uma página. Os filtros são processados pela GPU do navegador, tornando-os eficientes para efeitos visuais em tempo real.
O CSS fornece nove funções de filtro integradas: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate e sepia. Estas podem ser encadeadas em uma única declaração filter para criar efeitos visuais complexos. A ordem dos filtros importa — cada função processa a saída da anterior.
Como cada função de filtro funciona
Cada função de filtro recebe um único valor e transforma a saída visual do elemento. Entender o que cada função faz ajuda a combiná-las efetivamente.
- blur(px) — aplica um efeito de desfoque gaussiano, fazendo o elemento parecer desfocado. Valores maiores criam desfoque mais forte. Útil para sobreposições de fundo e efeitos de vidro fosco
- brightness(%) e contrast(%) — brightness escala a luminosidade geral (100% sem alteração, 200% dobro), enquanto contrast ajusta a diferença entre áreas claras e escuras
- grayscale(%), sepia(%) e hue-rotate(deg) — grayscale remove a saturação de cor, sepia adiciona um tom marrom quente, e hue-rotate desloca todas as cores ao redor da roda de cores
Experimente gratuitamente — sem cadastro
Gerar filtros CSS →Criando efeitos estilo Instagram
Empilhando múltiplas funções de filtro CSS, você pode recriar efeitos de filtros fotográficos populares inteiramente em código. Esses efeitos se aplicam em tempo real a qualquer elemento de imagem.
- Look vintage — combine sepia(60%) com contrast(110%) e brightness(90%) para criar um efeito de fotografia quente e desbotada que lembra câmeras de filme antigas
- Preto e branco — use grayscale(100%) com contrast(120%) para um efeito monocromático de alto contraste. Adicione brightness(110%) para um preto e branco mais brilhante
- Clima dramático — empilhe contrast(150%) com saturate(130%) e brightness(80%) para uma atmosfera vívida e escurecida onde as cores se destacam contra sombras profundas
Perguntas frequentes
Posso usar filtros SVG com a propriedade CSS filter?
Sim. A função url() dentro de CSS filter permite referenciar definições de filtros SVG personalizados para efeitos além das funções integradas. Isso permite efeitos avançados como mapas de deslocamento e matrizes de cores.
Os filtros CSS afetam a performance?
Os filtros CSS são acelerados por GPU nos navegadores modernos, tornando-os eficientes para a maioria dos usos. Filtros simples em imagens têm impacto mínimo. No entanto, aplicar desfoque em áreas grandes pode causar quedas de frames em dispositivos menos potentes.
Os filtros podem ser animados no hover?
Sim. Os filtros CSS funcionam perfeitamente com transições e animações. Um padrão comum é aplicar um filtro grayscale ou blur por padrão e transicionar para o visual original no hover, criando efeitos suaves acelerados pela GPU.