A ordem dos filtros importa?

Sim. Filtros CSS são aplicados da esquerda para a direita, e muitos não são comutativos. `filter: blur(8px) grayscale(100%)` desfoca primeiro a imagem colorida e depois dessatura; `grayscale(100%) blur(8px)` dessatura primeiro e desfoca o resultado em cinza. A diferença visual é sutil na maioria dos pares mas óbvia em blur + contraste ou blur + drop-shadow.

Por que filter é tão mais lento que truques de background-color?

Filtros forçam o navegador a alocar um canvas off-screen, renderizar o elemento ali, rodar o shader do filtro e então compor. Filtros leves (brilho, contraste, saturação) são baratos; pesados (blur, drop-shadow com raio grande) podem derrubar uma animação de 60 fps para 20. Evite filtros em elementos que animam ou rolam constantemente - aplique uma vez e deixe compor.

Diferença entre filter e backdrop-filter?

`filter` se aplica ao próprio elemento - a imagem dentro do ` ` ou o conteúdo pintado de um ` `. `backdrop-filter` se aplica ao que é renderizado *atrás* do elemento, visível pelo fundo dele. Use `filter` para efeitos de imagem (estilo Instagram); use `backdrop-filter` para overlays de vidro fosco sobre uma imagem. O gerador glassmorphism cobre o segundo caso.

Posso animar valores de filter?

Sim - `filter` é animável em transições e keyframes CSS. Cada função interpola independentemente, que é o que se quer para crossfades de nítido a borrado ou cor para tons de cinza. O pega é a performance: animar blur de 0 a 24 pixels estressa a GPU na maioria dos laptops. Teste no aparelho mais lento que você suporta.

Por que meus filtros não funcionam no conteúdo do iframe?

Restrições cross-origin. Filtros CSS funcionam bem em conteúdo de mesma origem (sua página, seus SVGs e imagens), mas o browser recusa filtrar iframes ou imagens cross-origin servidos sem `Access-Control-Allow-Origin: *`. Sirva o asset do seu próprio domínio ou use uma CDN amigável a CORS.

Gerador de filtro CSS

Playground CSS filter ao vivo com sliders para blur, brilho, contraste, saturação, sépia, escala de cinza, invert, hue-rotate e opacidade.

Predefinições

Desfoque0px

Brilho100%

Contraste100%

Saturação100%

Sépia0%

Escala de cinza0%

Inversão0%

Rotação matiz0deg

Opacidade100%

CSS

filter: none;

Pré-visualização

Arraste sliders para qualquer combinação de funções CSS filter e a pré-visualização atualiza ao vivo. Cada slider está ligado a uma função (`blur(Npx)`, `brightness(N%)`, etc.); a saída combina na ordem de origem, o que importa - blur antes de grayscale fica diferente de grayscale antes de blur. As predefinições recriam o visual de filtros estilo Instagram como ponto de partida.

Como usar

Escolha uma predefinição (ou pule)
Predefinições dão um ponto de partida em um clique. Pule e ajuste do zero se preferir.
Deslize cada função
Blur, brilho, contraste, saturação, sépia, escala de cinza, inverter, hue-rotate, opacidade - um slider por função.
Reordene se importar
Silencie ou reordene funções quando o resultado visual depender da ordem (blur + escala de cinza).
Copie o CSS
A declaração `filter:` combinada está pronta para colar na sua folha de estilos.

O que é?

A propriedade CSS `filter` aplica um efeito gráfico (desfoque, deslocamento de cor, contraste, etc.) a um elemento antes da composição. É a substituta web moderna das camadas de ajuste do Photoshop e das cadeias `<filter>` do SVG - acelerada por GPU quando o browser consegue, declarativa, empilhável. Cada função aceita um único parâmetro (comprimento para blur, porcentagem para a maioria das funções de cor, ângulo para hue-rotate) e produz um efeito idêntico ao da primitiva SVG-filter equivalente.

Quando usar

Recriar filtros estilo Instagram em CSS, atenuar ou dessaturar estados hover sem trocar imagem, montar galerias com leve blur em thumbs inativas, atenuar imagens de fundo atrás de texto de hero, aplicar brilho a imagens que ficam lavadas no modo escuro, e debug rápido (`filter: invert(1)` para flagrar assets ruins).

Erros comuns

Empilhar muitos filtros sobre uma imagem grande - a performance despenca. Animar `filter: blur()` para efeitos de «respiração» em imagens hero - até aparelhos modestos sofrem. Colocar `filter` no mesmo elemento que `backdrop-filter` (funciona, mas a interação confunde). Esquecer que filter se aplica a todos os filhos também - um pai com `filter: grayscale(1)` dessatura tudo, incluindo vídeo, mesmo que o filho seja colorido.

FAQ

A ordem dos filtros importa?: Sim. Filtros CSS são aplicados da esquerda para a direita, e muitos não são comutativos. `filter: blur(8px) grayscale(100%)` desfoca primeiro a imagem colorida e depois dessatura; `grayscale(100%) blur(8px)` dessatura primeiro e desfoca o resultado em cinza. A diferença visual é sutil na maioria dos pares mas óbvia em blur + contraste ou blur + drop-shadow.
Por que filter é tão mais lento que truques de background-color?: Filtros forçam o navegador a alocar um canvas off-screen, renderizar o elemento ali, rodar o shader do filtro e então compor. Filtros leves (brilho, contraste, saturação) são baratos; pesados (blur, drop-shadow com raio grande) podem derrubar uma animação de 60 fps para 20. Evite filtros em elementos que animam ou rolam constantemente - aplique uma vez e deixe compor.
Diferença entre filter e backdrop-filter?: `filter` se aplica ao próprio elemento - a imagem dentro do `<img>` ou o conteúdo pintado de um `<div>`. `backdrop-filter` se aplica ao que é renderizado *atrás* do elemento, visível pelo fundo dele. Use `filter` para efeitos de imagem (estilo Instagram); use `backdrop-filter` para overlays de vidro fosco sobre uma imagem. O gerador glassmorphism cobre o segundo caso.
Posso animar valores de filter?: Sim - `filter` é animável em transições e keyframes CSS. Cada função interpola independentemente, que é o que se quer para crossfades de nítido a borrado ou cor para tons de cinza. O pega é a performance: animar blur de 0 a 24 pixels estressa a GPU na maioria dos laptops. Teste no aparelho mais lento que você suporta.
Por que meus filtros não funcionam no conteúdo do iframe?: Restrições cross-origin. Filtros CSS funcionam bem em conteúdo de mesma origem (sua página, seus SVGs e imagens), mas o browser recusa filtrar iframes ou imagens cross-origin servidos sem `Access-Control-Allow-Origin: *`. Sirva o asset do seu próprio domínio ou use uma CDN amigável a CORS.