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 necessidade de editor de imagens. Várias funções podem ser encadeadas em uma única declaração e são aplicadas em ordem, que é como o estilo fotográfico parece vintage, quente e dramático. Esta ferramenta gerencia essa cadeia para você e produz apenas as funções que você alterou, mantendo o CSS limpo.

Tudo acontece no seu navegador A página abre na predefinição Vintage; escolha outra predefinição, ajuste cada função e copie a declaração Nenhuma conta, nenhum upload e ela continua funcionando offline assim que a página for carregada.

Aqui está o gerador de filtro CSS em um visual quente de fotos Clique na predefinição Quente e no filtro de leituras CSS Geradas: brilho (105%) saturar (140%) sépia (25%); com a visualização mudando para âmbar. Arraste o desfoque para 2 px e a linha se tornará filtro: desfoque (2 px) brilho (105%) saturar (140%) sépia (25%); Clique em Nenhum ou pressione Redefinir e ele retornará para filtrar: nenhum; Como a visualização é uma amostra de cor fixa em vez de sua própria foto, verifique o CSS copiado na imagem real antes de enviá-la.

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 relacionada 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 Esta ferramenta sempre escreve as funções em uma ordem fixa, desfoque primeiro e opacidade por último, por isso não pode produzir sépia antes grayscale; reordenar as funções à mão depois de copiar se você precisar disso.