Gerador de Filtros CSS
Crie efeitos de filtro CSS visualmente com pré-visualização ao vivo e controles deslizantes para desfoque, brilho, contraste, escala de cinza, rotação de matiz, inversão, opacidade, saturação e sépia.
Crie efeitos de filtro CSS visualmente com este gerador gratuito. Arraste os controles deslizantes de desfoque, brilho, contraste, escala de cinza, rotação de matiz, inversão, opacidade, saturação e sépia e veja a pré-visualização ao vivo se atualizar enquanto você os combina. Quando ficar do jeito certo, copie uma regra filter limpa e pronta para colar — tudo no seu navegador, sem nada para instalar.
O que é um gerador de filtros CSS?
Um gerador de filtros CSS é uma ferramenta visual que monta a propriedade filter para você. A propriedade filter do CSS aplica efeitos gráficos como desfoque, alteração de cor e mudanças de brilho a um elemento. Em vez de memorizar cada função de filtro e suas unidades, você ajusta os controles deslizantes, vê uma pré-visualização ao vivo e copia o CSS exato do filtro para colar na sua folha de estilos.
Como gerar filtros CSS
Ajuste os controles deslizantes dos efeitos desejados, observe a prévia e copie a regra gerada.
- Use o controle de Desfoque para suavizar o elemento, medido em pixels.
- Ajuste Brilho, Contraste e Saturação para alterar o tom e a intensidade.
- Aplique Escala de cinza, Sépia ou Inverter para tratamentos de cor estilísticos.
- Gire a matiz para deslocar todas as cores ao redor do círculo cromático.
- Clique em Copiar CSS para obter a regra filter pronta para colar.
Por que usar este gerador de filtros CSS?
- A pré-visualização ao vivo se atualiza instantaneamente conforme você ajusta cada filtro.
- Combine vários filtros em uma única regra na ordem correta.
- Apenas os filtros diferentes do padrão são incluídos, mantendo a saída limpa.
- Abrange desfoque, brilho, contraste, escala de cinza, rotação de matiz, inversão, opacidade, saturação e sépia.
- Um clique copia uma declaração filter pronta para colar.
- 100% gratuito e privado — tudo roda no seu navegador.
Perguntas frequentes
O que a propriedade filter do CSS faz?
A propriedade filter aplica efeitos visuais como desfoque, brilho, contraste, escala de cinza, rotação de matiz, inversão, opacidade, saturação e sépia a um elemento e ao seu conteúdo. É comumente usada em imagens, fundos e elementos de interface para mudar a aparência sem editar o arquivo de origem.
Posso combinar vários filtros de uma vez?
Sim. Você aplica várias funções de filtro em uma única declaração separando-as por espaços, por exemplo filter: contrast(120%) brightness(110%) blur(2px). Elas são aplicadas na ordem listada, então a sequência pode afetar o resultado final. Este gerador combina todos os filtros ativos em uma única regra para você.
Por que alguns filtros ficam de fora da saída?
Para manter o CSS limpo, qualquer filtro mantido em seu valor padrão (identidade) — como brilho 100% ou desfoque 0px — não tem efeito visual e é omitido. Se todos os filtros estiverem no padrão, a saída é filter: none.
Quais unidades as funções de filtro do CSS usam?
O desfoque usa uma medida de comprimento como px, a rotação de matiz usa um ângulo como deg, e as demais aceitam uma porcentagem (ou um número sem unidade equivalente, onde 1 equivale a 100%). Esta ferramenta gera porcentagens e graus para maior clareza e ampla compatibilidade.
A propriedade filter do CSS é suportada pelos navegadores?
Sim. A propriedade filter é suportada em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Para navegadores muito antigos pode ser necessário um prefixo de fornecedor ou um fallback, mas para os alvos atuais ela funciona sem prefixos.