Gerador de filtro CSS
Controles de filtro
Visualização ao vivo
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.
Verificações de CSS filter antes de modificar conteúdo
As funções são compostas em ordem e afetam contraste, significado da cor, clipping, stacking e custo de GPU.
Verifique a ordem
Compare a cadeia final, pois brightness, contrast, hue, saturation, blur e drop-shadow não são intercambiáveis.
Proteja cores semânticas
Revise estados, gráficos, recursos de marca, tons de pele e elementos disabled após os filtros.
Inspecione os limites
Teste blur e drop-shadow perto de overflow, cantos arredondados, transforms, elementos adjacentes e scroll.
Meça o custo da interação
Analise transitions e animations em imagens ou containers grandes e evite filtragem contínua desnecessária.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.