CSS Filter Generator

Sobre esta ferramenta

O Gerador de Filtros CSS permite ajustar visualmente nove funções de filtro CSS — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate e sepia — e ver o efeito combinado em tempo real.

Os filtros CSS aplicam efeitos visuais semelhantes ao software de edição de fotos. Eles são acelerados por GPU e funcionam em imagens, fundos, texto e qualquer elemento HTML. Todo o processamento ocorre no navegador.

Como usar

1. Arraste qualquer controle deslizante para aplicar esse efeito de filtro.
2. Combine vários filtros — a pré-visualização atualiza ao vivo.
3. Filtros com valores padrão são excluídos automaticamente do resultado.
4. Clique em Redefinir tudo para voltar aos padrões.
5. Clique em Copiar para copiar a propriedade CSS filter.

Casos de uso

Designers usam grayscale e sepia em imagens para seções monocromáticas. Desenvolvedores usam blur para fundos de vidro fosco. brightness é comum em efeitos de hover. Implementações de modo escuro usam filtros invert.

Perguntas frequentes

• Qual é a diferença entre filter e backdrop-filter? — filter aplica-se ao elemento e a todos os seus filhos. backdrop-filter aplica-se apenas à área atrás do elemento (útil para sobreposições de vidro fosco).
• Posso combinar múltiplos filtros? — Sim. Liste-os separados por espaços na propriedade filter. Esta ferramenta faz isso automaticamente.
• Os filtros CSS afetam o desempenho? — Filtros simples como grayscale e brightness são baratos. Blur é mais caro, especialmente em áreas grandes — use com moderação em dispositivos móveis.