Categoria: Desenvolvimento
Gerador de Filtros CSS
Monte uma declaração de filtro CSS com sliders ao vivo
Ajuste desfoque, brilho, contraste, escala de cinza, rotação de matiz, inversão, opacidade, saturação e sépia com sliders, veja o efeito combinado em tempo real, e copie a declaração de filtro CSS resultante.
filter: none;
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
A propriedade CSS filter aplica efeitos gráficos como desfoque e ajuste de cor diretamente no navegador, sem editar a imagem de origem. Combinar várias funções em uma única declaração é trabalhoso de escrever à mão — esta ferramenta monta a string para você conforme ajusta cada efeito, e só inclui as funções que você realmente alterou.
Como usar
- Arraste os sliders para ajustar cada função de filtro.
- Veja a caixa de pré-visualização atualizar em tempo real.
- Copie a declaração de filter gerada para sua folha de estilos.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Posso aplicar isso a uma imagem de fundo em vez de um elemento?
- Sim — filter funciona em qualquer elemento, inclusive aqueles com background-image. Para desfocar apenas o fundo atrás de um elemento (não seu conteúdo), use backdrop-filter em vez disso.
- O filter afeta a performance?
- Filtros complexos ou animados, especialmente o desfoque, podem ser custosos para renderizar em tamanhos grandes. Teste nos dispositivos reais que você está visando antes de publicar um filtro animado.
- Por que a ordem das funções de filter importa?
- Cada função é aplicada sobre o resultado da anterior, então grayscale(100%) sepia(50%) pode parecer diferente da ordem inversa. Esta ferramenta as aplica em uma ordem fixa e de bom senso.