PortuguêsPT

Gerador de filtros CSS online

Mova os controles deslizantes e a prévia e o código do filtro mudam juntos.

Seus textos e arquivos não saem do navegador: nada é enviado para nenhum servidor.

Arraste um arquivo para cá ou clique para escolher
Código CSS

Como usar

  1. Uma imagem de exemplo já vem carregada. Para usar a sua, solte a imagem na caixa abaixo.
  2. Mova um controle ou escolha um filtro pronto e o efeito é aplicado na hora. Valores deixados no padrão não entram no código.
  3. Mantenha pressionado “Segure para ver o original” para comparar com a imagem sem filtro.
  4. Copie o código CSS ou, nos navegadores compatíveis, clique em “Baixar” para salvar um PNG com o filtro aplicado.

Perguntas frequentes

A ordem das funções do filtro faz diferença?

Sim. Os filtros são aplicados da esquerda para a direita, então mudar a ordem muda o resultado. Esta ferramenta sempre escreve as funções na mesma ordem.

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

O box-shadow desenha uma sombra em volta da caixa retangular do elemento, enquanto o drop-shadow acompanha o formato visível de verdade e ignora as áreas transparentes. É ideal para PNG transparente e ícones.

Por que não aparece o botão Baixar?

Ele fica escondido nos navegadores que não aceitam filtros no canvas, como algumas versões do Safari. Mesmo assim, dá para copiar e usar o código CSS.

Ferramentas relacionadas

Degradê CSSDegradês lineares, radiais e cônicosFoto em preto e brancoTons de cinza, sépia e negativoConversor de imagensConverta entre JPG, PNG e WebPArte ASCIITexto e fotos feitos com caracteres

Todas as ferramentas