Softonic

Gerador de Filtros CSS

Etapa 1 / 2
Próximo

A propriedade CSS filter aplica efeitos de processamento de imagem, como desfoque, brilho, contraste e saturação, a qualquer elemento, não apenas a imagens. Os erros costumam aparecer ao encadear vários filtros e acertar as unidades. Este gerador monta a declaração filter para as cinco funções mais comuns: desfoque, brilho, contraste, escala de cinza e saturação. Insira seus valores e copie o CSS gerado.

Como criar uma cadeia de filtros

  1. 1

    Insira os valores

    O desfoque é em pixels; brilho, contraste, escala de cinza e saturação em percentuais.

  2. 2

    Entenda a escala

    Brilho e contraste em 100% significam nenhuma mudança; em 0%, o elemento fica preto ou cinza. A escala de cinza vai de 0% (cor total) a 100% (totalmente dessaturado); a saturação em 100% mantém as cores como estão.

  3. 3

    Gere o CSS

    Clique no botão e a ferramenta emite a regra `filter` combinada com as cinco funções.

  4. 4

    Copie a regra

    Copie o resultado e cole na sua folha de estilos.

  5. 5

    Confira a ordem

    As funções são aplicadas da esquerda para a direita. Se o efeito ficar diferente do esperado, ajuste os valores.

As funções de filtro

Função Unidade Efeito
blur() px Desfoque gaussiano. 0 = sem desfoque
brightness() % ou decimal 100% = sem alteração, 0% = preto, 200% = dobro
contrast() % ou decimal 100% = sem alteração, 0% = cinza, 200% = dobro
saturate() % ou decimal 100% = sem alteração, 0% = escala de cinza
grayscale() % ou decimal 0% = sem alteração, 100% = totalmente dessaturado
sepia() % ou decimal 0% = sem alteração, 100% = totalmente sépia
hue-rotate() deg 0deg = sem alteração. Rotaciona a roda de matiz
invert() % ou decimal 0% = sem alteração, 100% = totalmente invertido
opacity() % ou decimal Igual à propriedade opacity
drop-shadow() x y desfoque cor Como box-shadow, mas segue opacidade/caminho de recorte

A ordem do encadeamento importa

filter: brightness(0.5) saturate(2) aplica brilho primeiro, depois saturação, os dois filtros se combinam.

filter: saturate(2) brightness(0.5) aplica saturação primeiro. Como a imagem é mais clara antes de ser escurecida, a saturação da cor é mais pronunciada.

A diferença visual é sutil, mas real. Experimente ambas as ordens quando uma cadeia de filtros não parecer como você esperava.

Receitas comuns

/* Aparência de foto desbotada */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* Vintage / desbotado */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* Aproximação de duotone */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* Escurecer herói */
filter: brightness(0.6);

/* Estado desativado */
filter: grayscale(1) opacity(0.6);

/* Vidro / sobreposição fosca */
filter: blur(12px) saturate(1.3);

backdrop-filter para vidro fosco

filter se aplica ao próprio elemento; backdrop-filter se aplica ao que está atrás de um elemento semi-transparente, o efeito de vidro fosco popularizado pelo iOS.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

Suporte: todos os navegadores modernos; o Firefox finalmente o suporta sem sinalizador na versão 103+.

Notas de desempenho

  • blur() é o filtro mais caro porque requer convolução de cada pixel com um núcleo. Um desfoque de 30px em uma imagem hero de 4K consome quadros reais.
  • grayscale, sepia, brightness e similares são transformações de cor por pixel, baratas.
  • Filtros são acelerados por GPU em navegadores modernos, mas animar blur() ainda causa engasgos em dispositivos de baixo desempenho.
  • Prefira will-change: filter antes de animar.

filter: drop-shadow() vs. box-shadow

  • box-shadow segue a borda do elemento (respeita border-radius).
  • filter: drop-shadow() segue os pixels não transparentes do elemento, o que significa que ele traça formas de clip-path, transparência PNG e caminhos SVG.

Para sombras em imagens recortadas ou transparentes, use drop-shadow. Para cartões e caixas padrão, box-shadow é mais rápido.

Perguntas frequentes

Sim, o filtro é aplicado ao elemento e todos os seus descendentes como um grupo. Se você filtrar um pai, os filhos estão incluídos. Para filtrar apenas o fundo do pai, coloque o conteúdo em um contexto de empilhamento separado ou use backdrop-filter.

Porque o desfoque se aplica ao elemento inteiro, incluindo o texto renderizado. Não há como desfocar um fundo mantendo o texto nítido via filter simples. Use backdrop-filter em uma sobreposição semi-transparente, mantendo o texto fora do elemento filtrado.

Sim, todas as funções de filtro podem ser animadas. Fique atento ao desempenho do desfoque em dispositivos móveis, animar o raio de desfoque é notavelmente custoso. grayscale, sepia e brightness animam de forma barata.

Sim, o filter CSS se aplica a elementos SVG da mesma forma que a qualquer outro elemento DOM. SVG também possui seu próprio sistema de elementos <filter> mais rico, que é mais poderoso, mas muito mais verboso.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Ferramenta disponível em outros idiomas