Gerador de Filtros CSS

Ajuste efeitos como desfoque e brilho com controles deslizantes e gere código CSS filter enquanto visualiza

Informações de atualizaçãoAdicionar gerador de filtros CSS, gerar ajustando desfoque e brilhoVer informações de atualização

Características

9 tipos de efeitos com controles deslizantes

Visualização e código CSS mudam simultaneamente conforme você ajusta

Teste com suas próprias imagens

Carregue e visualize imagens locais diretamente no navegador para ver os efeitos

Veja a imagem original enquanto pressiona

Compare antes e depois dos efeitos instantaneamente

Ajuste fino a partir de 8 exemplos

Use exemplos como sépia ou vintage como ponto de partida para personalizar

Como usar

Escolha uma imagem

Selecione sua imagem em "Escolher minha imagem". Se não selecionar, pode testar com a imagem de exemplo incorporada

Ajuste os efeitos

Escolha um exemplo semelhante à aparência desejada ou ajuste a intensidade de cada efeito com os controles deslizantes

Compare antes e depois

Pressione "Comparar com imagem original" para visualizar a imagem sem efeitos

Copie o código

Use o botão "Copiar" para copiar a linha filter para seu CSS

Casos de uso

Legibilidade de texto sobre fotos de fundo

Desfoque levemente a foto de fundo para melhorar a legibilidade do título sobreposto

Padronizar tons de cor em fotos

Uniformize fotos em páginas de equipe ou galerias convertendo para escala de cinza ou sépia

Definir valores com suas próprias fotos

Use suas fotos reais para determinar valores para efeitos de desbotado ou vintage

Ajustar imagens para modo escuro

Determine valores reduzindo brilho e contraste para que as imagens não fiquem muito claras em fundos escuros

Conhecimento básico

Funções e unidades de filter

A propriedade CSS filter aplica efeitos à aparência de imagens ou elementos. Você escreve funções como blur e sepia separadas por espaços.

px (pixel)：A função blur especifica o raio do desfoque em px. Ao especificar 4px, as cores se mesclam em um raio de 4 pixels.
% (porcentagem)：Funções como brightness e sepia especificam a intensidade em %. Para brightness, 100% é o brilho original e 120% é 20% mais brilho.
deg (grau)：A função hue-rotate especifica o ângulo de rotação de cor na roda de cores em deg. Ao especificar 180deg, a cor muda para a matiz oposta.

Por que a ordem dos efeitos muda o resultado

As funções em filter são aplicadas da esquerda para a direita, com cada efeito aplicado ao resultado do anterior. Isso significa que a ordem pode alterar a aparência final. Por exemplo, aplicar sépia após escala de cinza deixa um tom marrom, enquanto aplicar sépia antes deixa sem o tom. Esta ferramenta usa uma ordem fixa, mas você pode editar o código CSS gerado para mudar a ordem.

Diferença entre filter e backdrop-filter

Filter e backdrop-filter usam as mesmas funções, mas afetam elementos diferentes.

filter：Filter aplica efeitos ao próprio elemento (imagens, texto, etc).
backdrop-filter：Backdrop-filter aplica efeitos ao que está visível atrás do elemento, usado para criar efeitos como vidro fosco.