Gerador de Filtros CSS
Gere efeitos de filtro CSS visualmente. Ajuste desfoque, brilho, contraste, escala de cinza, rotação de matiz, inversão, opacidade, saturação e sépia com pré-visualização ao vivo. Grátis.
Ou arraste uma imagem para a pré-visualização
Referência
O que é a propriedade CSS filter?
A propriedade CSS filter aplica efeitos gráficos como desfoque, mudança de cor e ajuste de contraste a um elemento. Os filtros são aplicados antes do elemento ser composto, afetando o elemento inteiro incluindo bordas e sombras. Múltiplas funções de filtro podem ser encadeadas em uma única declaração.
Todas as funções de filtro CSS
blur(px): Aplica um desfoque gaussiano. Valores mais altos = mais desfoque.
brightness(%): Ajusta o brilho. 100% = original, 0% = completamente preto.
contrast(%): Ajusta o contraste. 100% = original, 0% = completamente cinza.
grayscale(%): Converte para escala de cinza. 0% = original, 100% = totalmente cinza.
hue-rotate(deg): Rotaciona as cores no círculo cromático. 0deg = original, 180deg = matizes opostos.
invert(%): Inverte as cores. 0% = original, 100% = totalmente invertido.
opacity(%): Ajusta a transparência. 100% = totalmente opaco, 0% = totalmente transparente.
saturate(%): Ajusta a saturação das cores. 100% = original, acima de 100% = super-saturado.
sepia(%): Aplica um tom sépia. 0% = original, 100% = totalmente sépia.
Considerações de desempenho
Os filtros CSS são acelerados por GPU nos navegadores modernos. No entanto, aplicar filtros a áreas grandes ou animar valores de filtro pode causar redesenhos. Para melhor desempenho: use will-change: filter em elementos que serão animados e prefira backdrop-filter quando quiser desfocar apenas o que está atrás de um elemento.
Casos de uso comuns
Efeitos hover em imagens — escala de cinza em repouso, cor ao passar o mouse.
Estado desabilitado — filter: grayscale(100%) opacity(50%) para elementos desabilitados.
Modo escuro — filter: invert(1) hue-rotate(180deg) como truque rápido.
Desfoque de fundo — backdrop-filter: blur(10px) para sobreposições de vidro fosco.
Foto vintage — combinar sépia, contraste e brilho para look de filme analógico.
Privacidade
Toda a geração de filtros é executada 100% no seu navegador. Nenhum dado é enviado a qualquer servidor. As imagens carregadas permanecem no seu dispositivo.