%22%2F%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%22120%22%20r%3D%2244%22%20fill%3D%22%23fff4c9%22%2F%3E%3Cpath%20d%3D%22M0%20230%20L90%20150%20L170%20220%20L260%20130%20L360%20230%20L480%20160%20V300%20H0Z%22%20fill%3D%22%233d6b4f%22%2F%3E%3Cpath%20d%3D%22M0%20260%20L120%20200%20L230%20260%20L340%20210%20L480%20270%20V300%20H0Z%22%20fill%3D%22%23244a37%22%2F%3E%3C%2Fsvg%3E)
Como usar: Gerador de Filtro CSS
- Efeitos de imagem: arraste os controles deslizantes (ou escolha um predefinido) e acompanhe a pré-visualização. Clique em Usar minha imagem para testar na sua própria foto — ela fica no seu dispositivo.
- Cor hex para filtro: digite uma cor como
#4f46e5. A ferramenta encontra umfilterque transforma um ícone preto nessa cor. - Copie o CSS e aplique em uma
<img>, em um SVG ou em qualquer elemento.
Funções de filtro CSS
| Função | Efeito | Padrão |
|---|---|---|
blur(4px) | Desfoque gaussiano | 0 |
brightness(120%), contrast(110%) | mais claro/escuro, mais/menos contraste | 100% |
saturate(150%), grayscale(100%) | mais/menos cor | 100%, 0 |
hue-rotate(90deg) | desloca todas as cores na roda de cores | 0deg |
sepia(60%), invert(100%) | tom marrom quente, negativo | 0 |
drop-shadow(0 8px 12px #0006) | uma sombra que segue a transparência da imagem | none |
Os filtros são aplicados em ordem, da esquerda para a direita, então grayscale(100%) sepia(60%) não é o mesmo que a ordem inversa.
Recolorindo ícones com filtro
Você não consegue definir color em um <img src="icon.svg">, mas pode aplicar um filtro. Partindo do preto, uma cadeia como invert() sepia() saturate() hue-rotate() brightness() contrast() pode chegar a quase qualquer cor; esta ferramenta busca os valores com a menor diferença visível. Se você controla o SVG, fill="currentColor" é mais simples — o otimizador de SVG pode fazer isso para você.
Também pesquisado como: cor hex para filtro css, cor para filtro css, filtro css mudar cor svg, filtro de imagem css, filtro brilho contraste css, escala de cinza css, preto para cor css filter.
Ferramentas que combinam com: Gerador de Filtro CSS
- Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.
- Gerador de Border Radius — Arredonde os cantos de qualquer caixa: arraste um controle deslizante para todos os cantos ou defina cada canto separadamente, mude para cantos elípticos para criar formas de blob e folha e copie o CSS border-radius válido mais curto.
- Gerador de Box Shadow — Empilhe várias camadas de sombra, ajuste deslocamento, desfoque, espalhamento e opacidade em um cartão ao vivo e copie o CSS de box-shadow ou text-shadow.
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
Perguntas frequentes
Como mudo a cor de um ícone SVG ou PNG com CSS?
Se o ícone for preto, use Cor hex para filtro: digite a sua cor e aplique o filtro gerado na img. Para SVGs inline, defina fill="currentColor" e use a propriedade CSS color.
Por que a cor do filtro não fica exata?
Os filtros só conseguem aproximar algumas cores. A ferramenta mostra a diferença; execute a busca de novo para uma correspondência mais próxima — resultados marcados como “Perfeito” são indistinguíveis a olho nu.
Filtros CSS funcionam em qualquer elemento?
Sim — imagens, vídeos, SVG, texto e seções inteiras. Lembre que filtros criam um novo contexto de empilhamento e podem afetar o desempenho em áreas muito grandes.
Qual é a diferença entre box-shadow e drop-shadow?
box-shadow segue o retângulo do elemento; filter: drop-shadow segue os pixels visíveis, então se ajusta a formas PNG e SVG transparentes.
Posso instalar o Gerador de Filtro CSS como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Filtro CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.