Gerador de filtros CSS

Crie uma sequência de filtros

1. Escolha um tipo e adicione uma linha. Novas linhas começam com valores visualmente neutros; o exemplo inicial contém brilho e saturação. É possível repetir tipos em até doze linhas.
2. Edite os valores, ative ou exclua linhas e use os controles para mover ou duplicar. Cada função recebe o resultado da anterior, então a ordem pode alterar o efeito.
3. Compare a amostra filtrada e a original na mesma escala ou passe de Ajustar para 100% e examine com rolagem. O CSS copiado é o mostrado mesmo na vista original; campos ativos inválidos deixam o resultado indisponível.

Entenda a sequência de funções

Um filtro é uma sequência de processamento da esquerda para a direita, não uma pilha de sombras separadas por vírgulas. Duas linhas de desfoque permanecem como duas chamadas. Desativar uma linha a omite sem mudar sua posição; ao reativá-la, ela retorna ao mesmo lugar.

Brilho, contraste e saturação podem ultrapassar 100% neste editor. Escala de cinza, inversão, opacidade e sépia usam o intervalo de 0 a 100%. O ângulo de matiz conserva as voltas informadas: -450deg não é alterado para 270deg.

Drop-shadow acompanha a silhueta alfa da entrada, inclusive os resultados anteriores. Seu terceiro comprimento e o blur() usam desvio padrão gaussiano em pixels CSS, não a convenção de raio de desfoque do box-shadow. Não há inset ou spread; use chamadas repetidas para mais sombras.

Uma função ativada visualmente neutra ainda produz um valor de filtro e pode afetar agrupamento, empilhamento ou posicionamento. Limpe ou desative todas as linhas para gerar filter: none;.

Exemplos de ordem e transparência

O exemplo aplica brightness(125%), blur(1.25px), uma sombra com deslocamentos de -6px e 8px, desvio 3px e cor rgb(20 40 80 / 35%), e depois blur(0.5px). Ao excluir a sombra, os dois desfoques mantêm sua ordem.

Para um canal opaco hipotético com valor de um quarto, brightness(50%) seguido de invert(100%) resulta em sete oitavos; na ordem inversa, em três oitavos. O exemplo ilustra a ordem, sem prever os pixels exatos do navegador.

Duas chamadas opacity(50%) podem reduzir o alfa a um quarto. Uma sombra opaca sem deslocamento não é necessariamente neutra em conteúdo semitransparente; uma sombra totalmente transparente não acrescenta essa opacidade.

Limites do editor e da prévia

O editor numérico aceita dez tipos de função com px, porcentagens, graus, cor de sombra hexadecimal de seis dígitos e opacidade separada. Os intervalos são limites da interface, não toda a gramática CSS. Não há importação de CSS arbitrário, grafo SVG personalizado, upload, imagem remota, animação ou exportação de imagem.

A amostra fixa é ilustrativa, não sua foto ou página. Áreas vazadas e formas semitransparentes mostram o comportamento da silhueta. Conteúdo, fundo, layout e navegador podem mudar a aparência; isto não certifica cor, legibilidade ou contraste.

Ajustar dimensiona toda a área lógica sem alterar novamente os comprimentos CSS. A vista 100% usa a escala de coordenadas CSS e rolagem, sem prometer equivalência a pixels físicos. As margens são aproximadas, bordas do desfoque podem ser cortadas e sequências extremas podem parecer pequenas.

Valores ativos inválidos retiram o CSS atual e a prévia normal, sem manter um resultado antigo. Linhas desativadas preservam o texto, mas não entram no CSS nem na validação ativa. Uma falha exclusiva da prévia não altera o CSS válido ou a cópia.

Estilização local sem envio de imagens

A ferramenta não adiciona upload, solicitação de imagem remota, histórico de rascunhos, link com configurações ou telemetria com os valores informados. A amostra é criada em código e a cópia é explícita. Isso não garante exclusão em serviços existentes do site, extensões ou cópias guardadas por você.