Gerador de filtros CSS

Como usar

1. Ajuste os controles deslizantes de filtro : use os controles para regular desfoque, brilho, contraste, saturação, rotação de matiz, opacidade, tons de cinza, sépia e inversão.
2. Pré-visualize em tempo real : a imagem ou o elemento de exemplo é atualizado instantaneamente quando você move um controle.
3. Copie o CSS : o valor completo da propriedade filter (por ex. filter: brightness(1.2) contrast(1.5) saturate(0.8)) está pronto para colar na sua folha de estilo.

Por que usar o gerador CSS de filtros ?

Os filtros CSS permitem aplicar efeitos de processamento de imagem (desfoque, contraste, brilho, deslocamentos de cor) diretamente no navegador sem Photoshop ou software de edição de imagem. Funcionam em imagens, vídeos e qualquer elemento HTML. Construir a cadeia da propriedade filter à mão exige conhecer os nomes de função exatos e as faixas de valores válidas. Este gerador oferece controles deslizantes intuitivos com feedback visual para obter exatamente o resultado desejado.

Funcionalidades

• Todas as funções CSS filter : blur, brightness, contrast, saturate, hue-rotate, opacity, grayscale, sepia, invert e drop-shadow.
• Pré-visualização em tempo real : veja as mudanças em uma imagem de exemplo ou na sua em tempo real.
• Validação de valores : os controles deslizantes impõem as faixas válidas para cada função filter.
• Redefinição individual : volte um único filtro ao valor padrão sem mexer nos outros.
• Saída combinada : todos os filtros selecionados são combinados em uma única cadeia filter.

Perguntas frequentes

É possível aplicar filtros CSS em vídeos ?

Sim. A propriedade filter do CSS funciona em qualquer elemento, incluindo <video>, <img>, <div> e <canvas>. Aplicado a um vídeo, o filtro é renderizado em tempo real durante a reprodução.

Qual a diferença entre filter e backdrop-filter ?

O filter aplica o efeito ao próprio elemento e a todos os seus filhos. O backdrop-filter aplica o efeito ao conteúdo que está atrás (abaixo) do elemento, comumente usado para efeitos de vidro fosco.

Os filtros CSS afetam o desempenho ?

Filtros com desfoque ou compositing complexo podem ser pesados para a GPU. Para filtros animados, garanta que o elemento está em sua própria camada de composição (adicione transform: translateZ(0) como dica). Filtros estáticos em imagens e ícones têm impacto mínimo.

O que CSS filter realmente faz

A propriedade CSS filter aplica efeitos gráficos (desfoque, ajuste de contraste, mudança de cor, sombra projetada) a um elemento e seus filhos antes de o navegador pintá-lo na tela. O processamento acontece inteiramente no pipeline de renderização do navegador, geralmente acelerado por GPU, sem JavaScript envolvido. Os efeitos são apenas visuais: o HTML subjacente, o arquivo que uma imagem referencia e o layout permanecem inalterados. Uma fotografia exibida com filter: grayscale(1) ainda tem suas cores originais no arquivo; o navegador converte para escala de cinza somente na exibição.

CSS filter expõe dez funções: blur(px) para desfoque gaussiano, brightness(n) e contrast(n) para ajustes tonais, saturate(n) para intensidade de cor, hue-rotate(deg) para deslocar a roda de cores, opacity(n) para transparência, grayscale(n) e sepia(n) para efeitos de dessaturação, invert(n) para saída negativa, e drop-shadow(...) para sombras conscientes da forma (diferentemente de box-shadow, drop-shadow segue a forma realmente renderizada incluindo transparência, ideal para sombras em ícones ou imagens PNG com bordas recortadas). Funções encadeiam: filter: brightness(1.2) contrast(1.3) saturate(0.9) aplica os três em sequência.

Por que isso importa para o design web moderno: uma década atrás, ajustar brilho, matiz ou saturação de imagens para consistência de design exigia pré-processar cada imagem no Photoshop e reexportar. CSS filter traz os mesmos ajustes ao tempo de execução, aplicados de forma não destrutiva. Você pode servir uma única imagem e apresentá-la de maneiras diferentes com base no tema, estado de hover ou preferência do usuário. Você também pode usar filtros para acessibilidade: uma foto em escala de cinza invertida como placeholder, ou uma sobreposição de imagem escurecida para legibilidade de texto com alto contraste. O compromisso é o desempenho para alguns filtros (especialmente desfoque) e o fato de que os filtros também afetam filhos, o que pode cascatear inesperadamente.

Como esta ferramenta funciona nos bastidores

Cada controle deslizante na ferramenta está vinculado a uma única função de filtro. Quando você move um controle deslizante, o JavaScript lê o valor, constrói a string da função de filtro com aquele valor (por exemplo, brightness(1.4)), e concatena todas as funções ativas em uma única string CSS filter. Essa string é aplicada como estilo em linha na imagem de pré-visualização, produzindo feedback visual imediato à medida que o navegador repinta com o novo filtro. Nenhum dado de imagem é processado em JavaScript: a matemática real em nível de pixel acontece dentro do mecanismo de renderização do navegador, geralmente na GPU.

O CSS gerado mostrado na caixa de código é a mesma string aplicada à pré-visualização. Clique em «Copiar CSS» e a ferramenta escreve essa string em sua área de transferência usando a API moderna navigator.clipboard.writeText(). A string está pronta para colar no atributo style de qualquer elemento ou qualquer declaração de classe em sua folha de estilo. A ferramenta também suporta carregar sua própria imagem: escolha um arquivo e ele se torna uma URL blob: temporária no navegador, nunca enviada para qualquer lugar, e o filtro é pré-visualizado em sua imagem real para que você possa discar a aparência exata para seu conteúdo.

O comportamento de redefinição é por filtro: cada controle deslizante tem seu próprio botão de redefinição que retorna apenas aquele filtro ao seu valor sem efeito (1 para multiplicadores, 0deg para hue-rotate, 0px para blur). O botão «Redefinir Tudo» retorna cada controle deslizante para neutro simultaneamente. O estado da ferramenta vive apenas na memória; atualize a página e sua combinação de filtros se vai. Nenhum servidor armazena seus valores de filtro escolhidos, nenhuma análise rastreia quais combinações você tenta. A ferramenta é um playground de CSS sem estado, suportado por anúncios.

Breve história dos filtros CSS

• Primitivos de filtro SVG, 2001.SVG 1.0 (Recomendação W3C, setembro de 2001) define um sistema de filtros abrangente: feGaussianBlur, feColorMatrix, feConvolveMatrix e dezenas de outros. O modelo de filtro SVG é poderoso mas verboso, e aplicar filtros SVG a elementos HTML requer filter: url(#id) referenciando SVG inline, nunca amplamente adotado em fluxos de trabalho HTML-first.
• Módulo CSS Filter Effects Nível 1, 2014.O W3C publica o Filter Effects Module Nível 1 (dezembro de 2014), introduzindo as funções de filtro abreviadas simplificadas (blur, brightness, contrast, etc.) que não requerem SVG inline. Estas correspondem às necessidades mais comuns de processamento de imagem em 95% dos casos e são dramaticamente mais fáceis de autorar do que filtros SVG.
• Suporte de navegador atinge massa crítica, 2015.Chrome 53 (2015) e Firefox 35 (2015) enviam suporte de filter sem prefixo; Safari tem suporte prefixado desde a versão 6 (2012). Em 2015, CSS filter é amplamente utilizável em sites de produção. Designers começam a usar filtros para efeitos de hover, normalização de imagem e tratamentos decorativos em escala.
• backdrop-filter lançado, 2017 a 2024.Safari 9 (2015) introduz -webkit-backdrop-filter para efeitos de vidro fosco. Chromium lança backdrop-filter sem prefixo no Chrome 76 (julho de 2019). Firefox espera até a versão 103 (julho de 2022). A «barra de navegação fosca» estilo iOS torna-se um padrão de UI moderno padrão.
• Modo escuro impulsiona adoção de filtros, 2019.A tendência de design do modo escuro (macOS Mojave 2018 da Apple, Android 10 2019, iOS 13 2019, navegador prefers-color-scheme 2019) acelera o uso de filtros para CSS «modo escuro automático» invert-and-hue-rotate, onde uma única regra filter: invert(1) hue-rotate(180deg) transforma um site de modo claro em uma visualização de modo escuro passável sem redesenho.
• Complexidade de filtro SVG retorna via CSS, 2024 em diante.O Módulo CSS Filter Effects Nível 2 (rascunho) propõe novas funções e a capacidade de compor pipelines de filtro personalizados sem SVG inline, fechando a lacuna entre as funções abreviadas convenientes e o poder total dos primitivos de filtro SVG. O suporte de navegador ainda está sendo implementado em 2025.

Fluxos do mundo real

• Normalização de imagens consistente com a marca.Um site que obtém imagens de muitos fotógrafos ou provedores de stock obtém saturação, contraste e brilho inconsistentes. Aplicar um filtro CSS uniforme a todas as imagens (filter: saturate(0.85) contrast(1.05) brightness(0.95)) traz todas elas para a mesma paleta de cores sem pré-processar cada arquivo. Reverta o filtro para uma imagem específica quando quiser que ela se destaque.
• Estados de hover e interação.Efeitos de hover usando transições de filtro parecem polidos e leves. Imagens de cartão com filter: grayscale(0.5) em repouso e filter: grayscale(0) em hover criam um convite sutil para interagir. Miniaturas de imagem com filter: brightness(0.9) em repouso e brightness(1.1) em hover fazem o mesmo sem exigir dois arquivos de imagem.
• UI de vidro fosco com backdrop-filter.Sobreposições modais, barras de navegação fixas e popovers de tooltip usando backdrop-filter: blur(20px) sobre um fundo semitransparente produzem o efeito de vidro fosco estilo iOS. Isso agora é esperado em sites modernos de marketing; filter não se aplica porque queremos desfocar o que está atrás da sobreposição, não a sobreposição em si.
• Temas dinâmicos e modo escuro.Modo escuro barato: envolva seu site em um contêiner com filter: invert(1) hue-rotate(180deg) ativado via media query ou toggle. Isso converte texto escuro em claro, fundos claros em escuros, enquanto preserva a maioria das cores. É uma vitória rápida que lida com 80% dos requisitos de modo escuro sem projetar dois temas. Imagens reais devem ser excluídas com um filter: invert(1) hue-rotate(180deg) aninhado para desfazer a inversão, caso contrário as fotos parecem estranhas.
• Ferramentas de acessibilidade e modos de alto contraste.Usuários com deficiências visuais podem aplicar filtros em nível de navegador (extensão de alto contraste do Chrome, inversão em nível de SO), mas designers também podem oferecer toggles de filtro em nível de site: um botão que aplica filter: contrast(2) a toda a página para usuários com baixa visão. WebAIM e WCAG não exigem isso, mas é uma cortesia de acessibilidade de baixo custo que alguns sites adicionam.
• Tratamentos artísticos de fotos.Tons sépia, looks vintage, efeitos de foto blueprint e outros tratamentos artísticos combinam funções de filtro: filter: sepia(1) hue-rotate(200deg) saturate(1.5) brightness(0.8) produz um look vintage de tons frios em uma declaração. Comparado com presets de editor de imagem, CSS filter é não destrutivo e ajustável ao vivo sem reexportar.

Armadilhas comuns e o que significam

• Desfoque é o filtro caro.Entre as funções de filtro, blur() é o mais intensivo em GPU, especialmente em raios grandes (mais de 20px) em elementos grandes. Animar desfoque ou aplicá-lo a muitos elementos simultaneamente pode derrubar as taxas de quadro de forma notável. Para barras de navegação foscas fixas, o desfoque cobre uma área pequena e funciona bem; para desfoques modais de tela cheia, espere uma breve gagueira em dispositivos de baixo custo. Outros filtros (contrast, brightness, saturate) são quase grátis em GPUs modernas.
• Filtros afetam todos os descendentes.Aplicar filter a um contêiner afeta cada elemento filho dentro dele. Se você envolver um cartão em um contêiner com filter: grayscale(1), o texto dentro também se torna em escala de cinza (o que geralmente não muda nada já que o texto já é monocromático) e quaisquer elementos filhos coloridos (ícones, emblemas) perdem sua cor. Para filtrar apenas filhos específicos, aplique o filtro neles individualmente, não no pai.
• Baixo contraste prejudica a legibilidade.Reduzir o contraste (filter: contrast(0.5)) em um cartão com texto dentro torna o texto mais difícil de ler, geralmente caindo abaixo da razão de contraste WCAG AA 4.5:1 para texto normal. Aplique filtros que reduzem o contraste com cuidado; verifique se qualquer texto em cima permanece legível. Para elementos puramente decorativos (imagens de fundo, divisores), contraste reduzido é aceitável.
• Filtros não mudam áreas de clique.Diferentemente de clip-path, CSS filter não muda a área clicável de um elemento. Um botão com filter: blur(5px) parece suave e desfocado mas ainda é totalmente clicável em seu retângulo original. Isso geralmente é desejado, mas pode ser surpreendente quando um elemento com aparência «fantasma» ou «desativada» ainda dispara ao clicar. Combine filter com pointer-events: none para realmente desativar a interação.
• Safari precisa do prefixo -webkit- para backdrop-filter.A propriedade filter básica é sem prefixo em todos os navegadores modernos. Mas backdrop-filter ainda requer o prefixo -webkit-backdrop-filter no Safari (incluindo versões mais novas). Para efeitos de vidro fosco entre navegadores, declare tanto -webkit-backdrop-filter quanto backdrop-filter com o mesmo valor. Auto-prefixadores lidam com isso; se você está escrevendo CSS à mão, lembre-se do prefixo.
• Animar cadeias de filtros é trepidante.Transições CSS em filter interpolam suavemente quando a cadeia de filtros permanece a mesma (por exemplo, transicionar blur(0px) para blur(10px)). Mas adicionar ou remover funções no meio da transição (por exemplo, transicionar de blur(0px) para blur(10px) brightness(1.2)) salta abruptamente. Para transições multi-filtro suaves, declare todos os filtros nos estados de início e fim com os valores de linha de base apropriados (brightness(1) é o padrão).

Privacidade: tudo acontece em seu navegador

Ferramentas geradoras de CSS vêm em dois sabores: páginas HTML simples rodando JavaScript do lado do cliente (privadas, rápidas) e editores em nuvem que salvam seus projetos (colaborativos mas com compromissos de privacidade). Esta ferramenta é a primeira. Seus valores de controle deslizante, seu CSS gerado, e até mesmo qualquer imagem que você envia para pré-visualizar permanecem inteiramente em sua sessão do navegador. Atualize a página e o estado se vai a menos que você tenha copiado o CSS primeiro ou salvado uma captura de tela.

O recurso «enviar sua própria imagem» merece uma nota de privacidade: quando você escolhe um arquivo, o navegador cria uma URL blob: local apontando para a memória, e a pré-visualização exibe sua imagem com o filtro aplicado. Nenhuma solicitação vai para qualquer servidor. Abra a aba de Rede do navegador enquanto envia; você verá zero tráfego de saída. A imagem existe apenas na memória da aba do seu navegador e é apagada quando você fecha a aba. Para imagens confidenciais (designs proprietários, exames médicos, capturas protegidas por NDA), esta é a propriedade de privacidade que importa.

Quando outra ferramenta é a escolha certa

• Photoshop ou Lightroom para edições permanentes.CSS filter é apenas em tempo de exibição: o arquivo de imagem subjacente não é alterado. Se você quer que o arquivo de imagem real tenha esses ajustes incorporados (tamanho de arquivo menor, carregamentos de página mais rápidos, sem risco de fallback não filtrado em navegadores mais antigos), edite a imagem no Photoshop, Lightroom, GIMP ou Affinity Photo. CSS filter é para exibição dinâmica; editores de imagem são para processamento permanente.
• Image Filters para processamento em lote pontual.Nossa ferramenta Image Filters aplica efeitos de filtro semelhantes mas produz um PNG/JPG baixável com o filtro incorporado. Para processar muitas imagens consistentemente para um portfólio, conjunto de mídia social ou biblioteca de ativos, esse fluxo é mais rápido que aplicar filtros CSS em tempo de execução. Ambas as ferramentas servem diferentes casos de uso.
• Filtro SVG para efeitos complexos.Os atalhos de CSS filter cobrem a maioria das necessidades mas não tudo. Distorção ondulada, kernels de convolução personalizados (detecção de bordas, gravação em relevo), padrões de ruído feTurbulence, mapas de deslocamento: todos exigem primitivos de filtro SVG via SVG inline mais filter: url(#myFilter). Criar filtros SVG é mais difícil mas desbloqueia efeitos que o atalho de CSS filter não pode produzir.
• Propriedades personalizadas CSS para temas.O truque do «modo escuro invertido» usando filter tem limitações: as fotos parecem erradas, as cores se deslocam, o desempenho pode sofrer. Para modo escuro com qualidade de produção, propriedades personalizadas CSS (--bg-color, --text-color) com dois conjuntos de temas distintos são mais limpas. O modo escuro baseado em filtro é uma vitória rápida, não uma solução polida.

Mais perguntas frequentes

Posso animar mudanças de filtro CSS suavemente?

Sim, com ressalvas. A propriedade filter é animável em CSS, e transições entre duas cadeias de filtro com as mesmas funções na mesma ordem interpolam suavemente (blur(0px) brightness(1) para blur(10px) brightness(1.5) funciona). Adicionar ou remover funções no meio da transição salta abruptamente. Para animação multi-filtro suave, liste cada função que você quer transicionar nos estados de início e fim, usando valores neutros (brightness(1), saturate(1), blur(0px)) onde você não quer que um filtro específico seja aplicado.

CSS filter funciona em imagens de fundo?

Sim. CSS filter se aplica ao elemento inteiro, incluindo sua imagem de fundo, conteúdo e elementos filhos. Se você quer filtrar apenas a imagem de fundo mas não o conteúdo em primeiro plano, a abordagem típica é usar um elemento filho separado para o fundo (por exemplo, um pseudo-elemento ::before posicionado) com o filtro aplicado, depois colocar o conteúdo como um irmão não filtrado em cima. A propriedade backdrop-filter também é útil quando você quer filtrar o que é visível atrás de um elemento transparente.

Os filtros CSS são indexados por motores de busca?

Os filtros CSS são puramente visuais e não mudam o conteúdo HTML. Os motores de busca indexam o conteúdo subjacente (texto alt da imagem, texto circundante) como se o filtro não tivesse sido aplicado. Uma imagem em escala de cinza com filter: grayscale(1) ainda é indexada como a imagem colorida original com base em seu arquivo e texto alt. Isso geralmente é o que você quer: sem efeitos colaterais de filtro em SEO ou leitores de tela.

Por que drop-shadow parece diferente de box-shadow?

Box-shadow desenha uma sombra ao redor da caixa retangular de um elemento, ignorando qualquer transparência. Drop-shadow (filter) desenha uma sombra que segue a forma realmente renderizada, incluindo regiões transparentes. Para um ícone SVG com bordas recortadas ou um PNG com transparência, drop-shadow produz uma sombra consciente da forma que corresponde ao contorno visível. Box-shadow no mesmo elemento mostraria uma sombra retangular ao redor da caixa delimitadora, o que parece errado. Use drop-shadow para sombras conscientes da forma, box-shadow para elementos retangulares.

Qual é a diferença entre opacity e filter: opacity()?

Na maioria dos navegadores eles produzem resultados visualmente idênticos. A diferença técnica: opacity é uma propriedade de nível superior, enquanto filter: opacity() faz parte da cadeia de filtros e se compõe com outros filtros. Se você tem filter: blur(5px) opacity(0.5), ambos se aplicam juntos como uma única operação GPU. Usar opacity fora da cadeia de filtros funciona o mesmo na maioria dos casos. Fique com opacity para transparência autônoma; use filter: opacity() apenas quando encadear com outros filtros.

Posso redefinir todos os filtros rapidamente?

Sim. Defina filter: none para remover todos os filtros em uma declaração. Esta é a maneira mais limpa de redefinir, especialmente para estados de hover onde você quer remover todos os efeitos de filtro ao sair do hover. Alternativamente, defina cada função de filtro para seu valor neutro: filter: brightness(1) contrast(1) saturate(1) blur(0px) hue-rotate(0deg) grayscale(0) sepia(0) invert(0) opacity(1) é funcionalmente equivalente a filter: none mas mais verboso.