Gerador de filtros CSS (filter) para imagens

Gerador de filtros CSS (filter) para imagens: para que serve

A propriedade filter do CSS aplica efeitos de foto direto no navegador, sem editar o arquivo. Escolha uma foto e ajuste brilho, contraste, saturação, tons de cinza, sépia, matiz, inversão, desfoque, opacidade e sombra que segue o contorno (drop-shadow).

Comece por um dos filtros prontos (preto e branco, vintage, frio, quente, desbotado, vívido, noturno), copie o CSS ou baixe a imagem com o filtro aplicado. A opção de hover gera o efeito clássico da foto que volta ao normal ao passar o mouse, com transição que respeita quem pediu menos movimento.

Como usar

1. Escolha a foto ou use a de exemplo.
2. Ajuste os controles ou escolha um filtro pronto.
3. Copie o CSS ou baixe a imagem.

Quando usar

• Fotos de equipe em preto e branco.
• Galeria com efeito ao passar o mouse.
• Logos com sombra no contorno.

Perguntas frequentes

Qual a vantagem de usar filter em vez de editar a foto?

A mesma foto serve para vários efeitos, e dá para animar a mudança, como uma foto em preto e branco que fica colorida ao passar o mouse. Não é preciso salvar uma versão para cada efeito.

A ordem dos filtros importa?

Importa. Os filtros são aplicados da esquerda para a direita, e cada um trabalha sobre o resultado do anterior. Por isso uma sépia seguida de mudança de matiz dá um resultado diferente da ordem contrária.

Qual a diferença entre drop-shadow e box-shadow?

O box-shadow desenha a sombra do retângulo da imagem. O drop-shadow, que é um filtro, segue o contorno do que é visível, então funciona com PNG e SVG de fundo transparente, como logos e recortes.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas