Gerador de filtros CSS

O CSS Filter Generator é um editor visual para a propriedade de filtro CSS Você move um controle deslizante para cada função de filtro - desfoque, brilho, contraste, saturação, escala de cinza, sépia, inversão, rotação de matiz e opacidade - e assista o efeito se aplicar a uma visualização em tempo real, depois copie o CSS exato que ele produz.

A propriedade Filter aplica efeitos gráficos como desfoque, mudança de cor e ajuste de contraste diretamente no navegador, sem a necessidade de editor de imagens. Múltiplas funções podem ser encadeadas em uma única declaração e aplicadas em ordem, que é a construção do estilo fotográfico, como vintage, quente e dramático. Essa ferramenta gerencia essa cadeia para você e gera apenas as funções que você realmente mudou, mantendo o CSS limpo.

Tudo acontece no seu navegador. Comece a partir de uma predefinição como vintage ou em tons de cinza, ajuste cada função e copie a declaração. Sem conta, sem uploads e ele continua funcionando offline depois que a página é carregada.

Os filtros se aplicam na ordem escrita, e a ordem altera o resultado: escala de cinza, em seguida, sépia não é o mesmo que sépia, em seguida, escala de cinza, porque o primeiro remove a cor que o segundo iria matiz O gotcha vale a pena conhecer é estrutural, em vez de visual Qualquer elemento com um filtro diferente de nenhum torna-se um bloco de contenção para seus descendentes fixos e absolutamente posicionados, de modo que um dropdown ou modal dentro de um pai filtrado irá posicionar-se contra esse pai em vez do viewport Ele também cria um novo contexto de empilhamento, que pode quebrar ordenação de índice z que funcionou antes Se um filtro quebra um layout de uma forma que parece não relacionado com a aparência, que é quase sempre por isso Filtros são GPU-acelerados na maioria dos navegadores, mas grandes raios de desfoque em elementos grandes permanecem caros.