Por que parece turvo no meio?

O contraste padrão em 0 é uma rampa linear entre as duas cores. Subir o contraste íngrema a transição — útil quando sua imagem tem muitos cinzas médios que viram cores misturadas turvas. Baixar dá gradients mais suaves e pictóricos. O slider de midpoint move onde a divisão acontece para fotos com exposição desigual.

Como funciona a versão filtro SVG?

Usa `feColorMatrix` para converter a imagem em escala de cinza (usando coeficientes de luminância BT.709), depois `feComponentTransfer` com uma função `table` para remapear cada canal para um gradient de 2 pontos entre seus valores RGB de sombra e luz. O resultado: mesmo efeito que a versão canvas, mas sem rasterizar — e animável via transições CSS no filtro SVG.

Efeito Duotone de Imagem

Duotone substitui a faixa tonal de uma imagem por um gradient entre duas cores — as sombras viram a cor escura, as luzes a cor brilhante, os tons médios interpolam. O resultado é o look icônico que você viu em capas do Spotify, arte de álbum indie e fotografia editorial. Este construtor roda o duotone em um canvas no seu navegador (sem upload), então funciona em qualquer tamanho de imagem que sua máquina aguente. O slider de midpoint move onde ocorre a divisão de cor; o contraste íngrema ou achata a curva. A saída é PNG baixável, mais o filtro SVG `feColorMatrix` + `feComponentTransfer` equivalente para você aplicar o mesmo efeito via CSS `filter: url(#duotone)` sem re-rasterizar.

—

Como usar

Solte uma imagem. Escolha um preset (verde-preto Spotify é o clássico) ou duas cores hex customizadas.
Deslize o midpoint para controlar onde sombras terminam e luzes começam. Ajuste contraste para transições mais fortes ou suaves.
Baixe o PNG, ou copie o filtro SVG para aplicar o mesmo efeito via CSS em qualquer elemento do seu site.

Perguntas frequentes

Por que parece turvo no meio?: O contraste padrão em 0 é uma rampa linear entre as duas cores. Subir o contraste íngrema a transição — útil quando sua imagem tem muitos cinzas médios que viram cores misturadas turvas. Baixar dá gradients mais suaves e pictóricos. O slider de midpoint move onde a divisão acontece para fotos com exposição desigual.
Como funciona a versão filtro SVG?: Usa `feColorMatrix` para converter a imagem em escala de cinza (usando coeficientes de luminância BT.709), depois `feComponentTransfer` com uma função `table` para remapear cada canal para um gradient de 2 pontos entre seus valores RGB de sombra e luz. O resultado: mesmo efeito que a versão canvas, mas sem rasterizar — e animável via transições CSS no filtro SVG.

Ferramentas relacionadas

Gerador de vinheta de imagem

Adicione uma vinheta radial suave a qualquer foto — quantidade, suavidade, raio, forma oval / círculo / retângulo, escurecer ou clarear, qualquer cor. 100% no seu navegador, sem upload.

Imagem 0 0

Efeito Tilt-Shift / Miniatura

Simule um look de diorama miniatura em qualquer foto — faixa de foco nítida e topo/base desfocados, com boost de saturação opcional, tudo no navegador.

Imagem 0 0

Desfoque de imagem

Aplica desfoque Gaussiano, caixa ou de movimento a qualquer imagem no seu navegador. Raio ajustável 0-64 px, com o filtro CSS equivalente pronto para copiar.

Imagem 0 0

Posterizar Imagem

Reduz uma foto pra N níveis por canal pra aquele visual plano de pôster, com dithering Floyd-Steinberg opcional e controle de níveis por canal.

Imagem 0 0

Playground de Filtros CSS

Componha visualmente blur, brightness, contrast, hue, sepia, invert e mais — copie o filtro CSS ou valor arbitrário Tailwind.

Cor 0 0

Seletor de Cor de Imagem

Solte uma imagem e clique em qualquer ponto para pegar o HEX / RGB / HSL exato daquele pixel — monte uma paleta no caminho.

Imagem 0 0

Gerador de Sprite Sheet de Imagens

Solte várias imagens e asse-as em um único PNG sprite — horizontal, vertical ou grid — mais regras CSS background-position prontas pra colar.

Imagem 0 0