Gerador de Filtros CSS Online Gratuito
Gere efeitos de filtro CSS com previa ao vivo.
'/%3E%3Ccircle cx='200' cy='150' r='70' fill='rgba(255,255,255,.25)'/%3E%3C/svg%3E)
Who uses the Gerador de Filtros CSS?
- Desenvolvedores front-end pré-visualizando combinações de filtros de imagem antes de aplicá-las a um projeto.
- Designers de UI prototipando visuais de estado de hover e temas de cor em CSS.
- Desenvolvedores web explorando como filtros de brilho/contraste/saturação interagem antes de escrever o CSS final.
How the Gerador de Filtros CSS works
A ferramenta carrega com uma imagem gradiente de exemplo embutida — não há opção de upload.
Ajuste os controles deslizantes de filtro: brilho, contraste, saturação (0–200%), rotação de matiz (0–360°), desfoque (0–20px), escala de cinza, sépia e inversão (0–100%).
Combine múltiplos filtros para alcançar o efeito desejado; clique em Reset para restaurar todos os controles aos valores padrão.
Copie a propriedade CSS filter do painel de saída para usar no seu projeto.
Tips & tricks
- Não há upload de imagem — teste as combinações de filtros na imagem de pré-visualização embutida antes de copiar o CSS para aplicar à sua imagem real.
- Filtros que permanecem com o valor padrão (brilho 100%, desfoque 0, etc.) são omitidos automaticamente da saída, mantendo o CSS gerado enxuto.
- opacity() e drop-shadow() não são oferecidos como controles deslizantes aqui — adicione-os manualmente ao valor de filter copiado, se precisar.
- Clique em Reset para restaurar instantaneamente cada controle deslizante ao valor padrão e recomeçar.
Frequently Asked Questions
Quais filtros CSS esta ferramenta gera?
Oito filtros: brightness(), contrast(), saturate(), hue-rotate(), blur(), grayscale(), sepia() e invert(). Eles são combinados nessa ordem em uma única propriedade filter, e filtros com valores padrão (sem efeito) são omitidos.
Posso enviar minha própria imagem para pré-visualizar os filtros?
Não atualmente — a pré-visualização usa uma imagem gradiente embutida fixa. Copie o CSS de filtro gerado e aplique-o à sua própria imagem no seu projeto para ver o efeito em conteúdo real.
Como aplico um filtro CSS a uma imagem no hover?
Adicione o filtro em :hover: .image { filter: none; transition: filter 0.3s; } .image:hover { filter: brightness(1.2) contrast(1.1); } Isso cria uma transição suave de filtro ao passar o mouse.
Qual é a diferença entre os filtros box-shadow e drop-shadow?
box-shadow se aplica à caixa (retangular) do elemento. O filtro drop-shadow() segue a forma alfa real do elemento — ideal para imagens PNG com transparência, para que a sombra se ajuste ao contorno da imagem. Esta ferramenta não inclui um controle de drop-shadow; adicione-o manualmente ao CSS copiado, se necessário.
Os filtros CSS podem ser animados?
Sim. Os filtros CSS podem ser animados com transições e animações keyframe: @keyframes pulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.5); } 100% { filter: brightness(1); } }
Is my data safe when using the Gerador de Filtros CSS?
Completely safe. The Gerador de Filtros CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Gerador de Filtros CSS output in commercial projects?
Yes. The Gerador de Filtros CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Gerador de Filtros CSS follow official standards?
Yes. The Gerador de Filtros CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.