Editor de Filtros CSS

Editor visual de filtros CSS. Blur, brilho, contraste, rotação de matiz e mais com prévia ao vivo.

Gerador de filtros CSS

Visually adjust CSS filter effects with sliders. Preview on a sample image in real-time. Apply presets or fine-tune each property.

Predefinições

Saída CSS

filter: none;

Filters (0 active)

Blur0px

Brightness100%

Contrast100%

Grayscale0%

Hue Rotate0deg

Invert0%

Opacity100%

Saturate100%

Sepia0%

Como criar efeitos de filtro CSS

Projete efeitos de filtro estilo foto com prévia ao vivo usando o editor gratuito de Filtros CSS do The IT Hustle.

1
Comece com um presetExperimente Vintage, P&B, Quente, Frio, Dreamy, Dramático, Neon ou Desbotado para carregar um efeito instantaneamente.
2
Ajuste os controles deslizantesAjuste blur, brilho, contraste, escala de cinza, rotação de matiz, inversão, opacidade, saturação e sépia individualmente.
3
Observe a prévia ao vivoCada alteração é aplicada à imagem de exemplo imediatamente, para você calibrar exatamente o visual desejado.
4
Copie o CSSClique em Copiar CSS para obter uma regra filter limpa, contendo apenas as funções que você realmente alterou.
5
Reinicie e experimenteClique em Reset para voltar aos padrões e tentar uma combinação diferente.

Perguntas frequentes

Sim — imagens são o alvo mais comum, mas o filter funciona em qualquer elemento, incluindo vídeo, texto e seções inteiras da página. Um filtro de escala de cinza em um cartão inteiro é um efeito de hover popular.

A maioria dos filtros é acelerada por GPU e barata, mas o blur é o mais custoso — raios de blur grandes em elementos grandes podem causar travamentos, especialmente durante a rolagem. Teste em dispositivos mais fracos se você animar filtros.

Sim. A propriedade filter aceita uma lista separada por espaços e os aplica em ordem — é exatamente assim que os presets funcionam, por exemplo, o Vintage combina ajustes de sépia, contraste e brilho.

Visualmente são parecidas, mas filter: opacity() pode ser combinado com outras funções de filtro em uma única declaração e é acelerado por GPU no mesmo pipeline. Para um fade isolado, a propriedade opacity comum já é suficiente.

Todos os navegadores modernos — Chrome, Firefox, Safari e Edge — suportam a propriedade filter sem prefixos. Apenas navegadores muito antigos, como o IE11, não a possuem, e nesse caso a imagem simplesmente é exibida sem filtro.

Ferramentas relacionadas

Gerador de Gradiente CSS Gerador de Box Shadow Gerador de Border Radius