Gerador de Filtros CSS
Monte uma cadeia reordenável de funções CSS filter() e backdrop-filter() e pré-visualize-a ao vivo na sua própria foto enviada, com uma linha CSS copiável e exportação PNG.
🔒 Processado inteiramente em seu navegador – nada que você digita aqui é carregado.
Resultado
Todos os geradores de filtros CSS permitem empilhar blur(), brightness(), contrast() e os restantes — mas quase nenhum deixa que a ordem importe, porque a maioria aplica os filtros sempre numa sequência fixa. Este é diferente: a cadeia de filtros é uma lista real e reordenável construída com arrasto nativo HTML5, e reordenar duas funções muda genuinamente os píxeis renderizados, exatamente como aconteceria em CSS de produção. Blur seguido de hue-rotate tem um aspeto diferente de hue-rotate seguido de blur, e agora pode ver porquê antes de o enviar.
Envie a sua própria foto e as nove funções encadeáveis — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert e drop-shadow — aplicam-se ao vivo como uma declaração CSS `filter` real num elemento `<img>`, não como uma amostra simulada. Adicione uma função a partir da seleção, arraste a sua linha para cima ou para baixo na lista para mudar a sua posição na cadeia, ajuste o slider, e a pré-visualização e a linha `filter: ...;` copiável atualizam a cada entrada. Remova um passo com o seu próprio botão, mesmo ali na linha.
Uma segunda cadeia, mais pequena, constrói um valor `backdrop-filter` aplicado a um painel sobreposto posicionado sobre a pré-visualização, para que possa ver o efeito de vidro fosco — a técnica por detrás das modernas barras de navegação translúcidas e fundos modais — sem alterar a cadeia de filtros da própria imagem subjacente. Funciona mesmo antes de enviar uma foto, contra o fundo colorido de marcador de posição, para que possa afinar um design de painel fosco em segundos.
Quando a pré-visualização estiver com o aspeto pretendido, copie o CSS diretamente da caixa de saída ou exporte um PNG real: a mesma string de filtro é passada à propriedade `ctx.filter` de um contexto Canvas 2D — que usa a sintaxe idêntica à da propriedade CSS `filter` — e o canvas é convertido num ficheiro descarregável com `canvas.toBlob()`. A imagem exportada corresponde exatamente à pré-visualização ao vivo, porque é produzida pela mesma string de filtro a correr pela mesma primitiva de renderização. Tudo acontece localmente no seu browser; a sua foto nunca é enviada para lado nenhum.