CSS Filter Generator
O CSS Filter Generator permite montar e combinar efeitos de filter do CSS de forma visual, com um preview ao vivo da imagem para você nunca precisar adivinhar valores. Ajuste desfoque, brilho, contraste, cor e mais, e depois copie a propriedade filter exata direto para a sua folha de estilos.
Foi feito para desenvolvedores front-end e designers que querem acertar efeitos de imagem e de hover sem o ciclo editar-salvar-atualizar. Cada função de filtro padrão tem seu próprio controle deslizante e campo numérico, e dez predefinições prontas dão um visual caprichado para você começar.
Como usar o CSS Filter Generator
Ajuste os filtros
Arraste qualquer controle deslizante para alterar um filtro, ou digite um valor exato no campo numérico. O preview da imagem e o CSS gerado se atualizam em tempo real conforme você mexe.
Comece por uma predefinição (opcional)
Clique na miniatura de uma predefinição — como Vintage, Noir ou Dramático — para aplicar um visual pronto e, a partir daí, refinar cada filtro individualmente.
Alterne e compare
Use a caixa de seleção de cada filtro para ligá-lo ou desligá-lo sem perder o valor, e segure o botão de olho para espiar a imagem original, sem filtros.
Copie o CSS
A propriedade filter completa aparece abaixo do preview. Clique em Copiar para mandá-la para a área de transferência, pronta para colar na sua folha de estilos.
Recursos
Nove controles de filtro
Controle total sobre desfoque, brilho, contraste, escala de cinza, girar matiz, inverter, opacidade, saturação e sépia, cada um com seu próprio controle deslizante e campo numérico.
Preview ao vivo da imagem
Veja cada alteração aplicada na hora a uma imagem real, sem precisar escrever código, salvar e atualizar.
Dez predefinições prontas
Comece por Original, Vintage, Noir, Quente, Frio, Dramático, Desbotado, Alto contraste, Sonhador ou Inverter — cada uma exibida como miniatura de preview.
Alternar filtros individualmente
Ative ou desative qualquer filtro com uma caixa de seleção para isolar e comparar seu efeito, sem perder o valor que você definiu.
Comparação Antes / Depois
Segure o botão de olho para ver a imagem original e solte para voltar à versão filtrada. Funciona com mouse e com toque.
Envio de imagem própria
Carregue sua própria imagem para testar os filtros em conteúdo real. Ela é lida localmente no seu navegador e nunca é enviada.
Redefinir com um clique
O botão Redefinir devolve cada filtro ao seu padrão para você começar um novo efeito a qualquer momento.
Exportar CSS com um clique
A propriedade filter gerada se atualiza ao vivo e é copiada para a área de transferência com um único clique.
Modo escuro e responsivo
Um tema escuro embutido e um layout responsivo mantêm a ferramenta confortável de usar no desktop e no celular.
Perguntas frequentes
Quais filtros CSS este gerador suporta?
Ele cobre nove funções de filtro CSS padrão: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate() e sepia().
Como combino vários filtros CSS?
Ajuste quantos filtros quiser de uma vez. A propriedade filter do CSS permite encadear funções, e a ferramenta escreve todas automaticamente em uma única declaração filter combinada.
Como desfoco uma imagem em CSS?
Aumente o controle deslizante de Desfoque, que corresponde a filter: blur() em pixels (até 20px aqui). Observe o preview e copie a propriedade gerada — por exemplo filter: blur(4px);.
Como deixo uma imagem em escala de cinza com CSS?
Defina o controle deslizante de Escala de cinza em 100%, o que gera filter: grayscale(100%); para uma imagem totalmente em preto e branco. Qualquer valor intermediário dá uma dessaturação parcial. A predefinição Noir combina isso com um aumento de contraste.
O que fazem as predefinições?
As predefinições são combinações de filtros prontas que criam visuais populares. A Vintage, por exemplo, mistura sépia com brilho, contraste e saturação ajustados. Aplique uma como ponto de partida e depois ajuste cada filtro a gosto.
A imagem que enviei vai para um servidor?
Não. Quando você envia uma imagem, ela é lida localmente com o FileReader do seu navegador e exibida apenas no preview. A imagem nunca sai do seu dispositivo e não é enviada para lugar nenhum.
Como redefino todos os filtros?
Clique no botão Redefinir no painel de predefinições para devolver cada filtro ao seu valor padrão, deixando a imagem sem nenhum efeito aplicado.
Quais navegadores suportam filtros CSS?
A propriedade filter do CSS funciona em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge, então o código que você copia aqui é seguro para colocar em produção.
Ainda não há comentários. Seja o primeiro a comentar!