Gerador de Filtro CSS
Crie uma declaração de filtro CSS combinando controles deslizantes de blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate e sepia em uma única propriedade de filtro encadeada.
Entrada
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-filter-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"blur": "2",
"brightness": "110",
"contrast": "100",
"grayscale": "50",
"hueRotate": "0",
"invert": "0",
"opacity": "100",
"saturate": "100",
"sepia": "0"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-filter-generator` tool (CSS Filter Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-filter-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Filtro CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que é a propriedade CSS filter?
filter aplica efeitos gráficos — blur, ajustes de cor e mais — diretamente a um elemento com uma única linha de CSS, sem necessidade de editor de imagem ou marcação extra. Múltiplas funções podem ser encadeadas em uma declaração, separadas por espaço, e os navegadores as aplicam na ordem em que são escritas. É amplamente usado para efeitos hover, tratamento de imagens (galerias em escala de cinza, aparência sepia "vintage"), estilo de estado desativado e tonalização de cor de marca rápida.
As nove funções de filtro que esta ferramenta cobre
blur(px)— suaviza o elemento com um desfoque Gaussiano. Valores maiores desfocam mais.brightness(%)— dimensiona a luminância.100%não muda, abaixo escurece, acima ilumina.contrast(%)— dimensiona a diferença entre áreas claras e escuras.100%não muda.grayscale(%)— desatura em direção ao preto e branco.100%é totalmente escala de cinza.hue-rotate(deg)— gira todos os matizes ao redor da roda de cores pelo ângulo fornecido.invert(%)— inverte cores.100%produz um efeito de negativo fotográfico.opacity(%)— torna o elemento translúcido, como a propriedadeopacitymas como função de filtro (portanto pode ser encadeado com os outros).saturate(%)— dimensiona a intensidade da cor. Abaixo de100%amortece cores, acima de100%as torna mais vívidas.sepia(%)— desloca a imagem em direção a um tom marrom quente "fotografia antiga".100%é totalmente sépia.
Como usar esta ferramenta
- Arraste qualquer controle deslizante para ajustar essa função de filtro — o CSS gerado é atualizado instantaneamente conforme você trabalha.
- Combine vários controles deslizantes para criar um efeito em camadas (por exemplo, um toque de
sepiamais um impulso decontrastpara uma aparência vintage). - Deixe um controle deslizante em sua posição padrão (inalterado) para pular essa função inteiramente — a ferramenta apenas escreve funções que realmente mudam a saída, mantendo a linha gerada curta e legível.
- Copie o CSS gerado da caixa CSS, ou baixe como arquivo
.css, e cole em sua folha de estilos ou bloco<style>. Aplique a qualquer seletor:.my-element { filter: ...; }.
Ordem da função
Quando mais de um filtro está ativo, esta ferramenta sempre os escreve em uma ordem fixa — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia — correspondendo à ordem dos controles deslizantes no formulário. CSS aplica funções de filtro encadeadas da esquerda para a direita, então se você editar manualmente a saída depois, tenha isso em mente: reordenar funções pode mudar o resultado visual, particularmente quando blur é misturado com ajustes de cor.
FAQ
Por que a saída não lista todas as funções de filtro todas as vezes?
Um filtro deixado em seu valor neutro (brightness(100%), blur(0px), e assim por diante) não muda como o elemento se parece, então incluir seria apenas ruído. Esta ferramenta omite funções no-op e volta para filter: none; quando cada controle deslizante está em seu padrão.
Posso animar ou fazer transição desses filtros?
Sim — filter é animável com CSS transition ou @keyframes, que é uma maneira comum de criar efeitos hover suaves (por exemplo transition: filter 0.2s ease; junto com uma regra :hover que muda para um valor de filtro diferente).
O filter afeta o layout?
Não. Como transform, filter é puramente visual — não refaz o fluxo do conteúdo ao redor, embora um blur grande possa vazar visualmente fora da caixa do elemento.
O filter é suportado em todos os navegadores?
Sim, filter sem prefixo tem suporte total em todos os navegadores modernos.
Qual é a diferença entre filter: opacity() e a propriedade CSS opacity?
Eles renderizam o mesmo resultado visual, mas filter: opacity() compõe com outras funções de filtro em uma única cadeia filter, enquanto a propriedade opacity autônoma é uma declaração separada e mais simples. Use a propriedade opacity simples a menos que você já esteja encadeando outros filtros.
Privacidade
Tudo acontece no seu navegador. Nenhum CSS, valores ou configurações que você inserir são enviados para um servidor — a declaração é gerada e atualizada localmente conforme você ajusta os controles deslizantes.