Gerador de filtro CSS
Ajuste visualmente um filtro CSS (desfoque, brilho, contraste, saturação, escala de cinza, sépia, inversão, rotação de matiz) em uma imagem de prévia e depois copie o código filter obtido. Nada é enviado a um servidor: tudo é calculado diretamente no seu navegador.
Como funciona
A propriedade CSS filter aplica efeitos gráficos (desfoque, brilho, contraste...) diretamente no navegador, sem retocar a imagem de origem. Esta ferramenta permite combinar vários efeitos ao mesmo tempo em uma prévia ao vivo e depois obter o valor exato para colar na sua folha de estilos, em uma imagem, uma miniatura de galeria ou um efeito de hover.
O filtro CSS modifica o arquivo de imagem original?
Não. O filter é um efeito puramente visual aplicado à renderização do elemento pelo navegador: o arquivo de imagem permanece intacto no disco. Para obter uma imagem definitivamente modificada, seria preciso redesenhá-la em um canvas e depois exportá-la.
É possível animar um filtro CSS no hover?
Sim, combinando a propriedade com uma regra :hover e uma transition em filter, o efeito passa gradualmente de um estado para o outro, uma técnica comum em miniaturas de portfólio ou cartões de produto.
Nenhuma imagem nem dado é transmitido a um servidor: o cálculo do filtro é executado apenas no seu navegador.