Gerador de filtro CSS
Controles de filtro
Core
Color
Visualização ao vivo
Sample
Live filter preview
Changes appear here immediately while you adjust the controls.
Estado
Inativo
Sobre o Gerador de Filtro CSS
Os filtros CSS permitem aplicar efeitos visuais como desfoque, contraste e rotação de matiz diretamente no navegador.
Esta ferramenta ajuda você a criar strings de filtro, visualizá-las ao vivo e analisar valores de filtro CSS existentes de volta em controles editáveis.
Como usar
- Mova os controles deslizantes ou edite os valores manualmente.
- Assista à atualização prévia em tempo real.
- Clique em Gerar para normalizar a sequência de filtros.
- Cole um valor de filtro existente e clique em Analisar para editá-lo.
Dicas
- Use brilho e contraste juntos para mudanças visuais mais fortes.
- A rotação e a saturação de matiz são úteis para experimentos temáticos rápidos.
- Tons de cinza e sépia são úteis para efeitos suaves ou vintage.
- Valores de desfoque pequenos geralmente parecem melhores do que valores grandes no trabalho da IU.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Gerador de animação CSS
Gere abreviações de animação CSS, quadros-chave e CSS pronto para uso com visualização ao vivo.
Utilitários Diversos
›
Gerador de transformação CSS
Gere e analise valores de `transform` CSS como `translate`, `scale`, `rotate`, `skew` e `transform-origin`.
Utilitários Diversos
›
Gerador de gradiente CSS
Gere, analise e visualize gradientes lineares e radiais CSS online. Gerador de gradiente gratuito para desenvolvedores e designers.
Utilitários Diversos
›
Conversor de cores
Converta cores HEX, RGB, RGBA e HSL instantaneamente em seu navegador.
Utilitários Diversos
›
Perguntas frequentes
Quais filtros CSS são suportados?
Esta ferramenta suporta desfoque, brilho, contraste, escala de cinza, rotação de matiz, inversão, opacidade, saturação e sépia.
Posso analisar um valor de filtro existente?
Sim. Cole uma string de filtro CSS na área de entrada e clique em Analisar.
A atualização de visualização está ativa?
Sim. A visualização é atualizada imediatamente quando você altera os valores do controle deslizante ou do texto.
A saída gerada é CSS válido?
Sim. A ferramenta gera um valor de filtro válido e uma regra CSS pronta para copiar.