Elysia Tools
Navegação
Design
Gera propriedades de filtro CSS
Execução
Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.
Exemplos
Relacionado
Pronto para executar
Guia de uso da ferramenta
O Gerador de Filtros CSS permite criar e visualizar rapidamente propriedades visuais para elementos web, como desfoque, brilho, contraste e saturação, gerando o código CSS pronto para uso em seus projetos.
Contexto
Preciso que as fotos de perfil dos usuários fiquem em preto e branco até que o mouse passe sobre elas.
Problema
Aplicar o filtro de escala de cinza de forma precisa sem editar as imagens originais.
Como usar
Defina o valor de 'Escala de Cinza' para 100% no gerador e copie o código resultante.
filter: grayscale(100%);Resultado
A imagem é exibida em tons de cinza, mantendo o arquivo original intacto.
Contexto
Estou criando um cartão de interface que precisa de um efeito de desfoque no fundo para dar profundidade.
Problema
Encontrar o nível ideal de desfoque para que o texto sobreposto permaneça legível.
Como usar
Ajuste o controle de 'Desfoque' até atingir o nível desejado de nitidez e copie o valor gerado.
É uma propriedade que permite aplicar efeitos gráficos como desfoque ou mudança de cor a um elemento.
Sim, o gerador permite ajustar múltiplos parâmetros simultaneamente, criando uma string de filtro composta.
Filtros simples são processados eficientemente pelo navegador, mas o uso excessivo de desfoque pode impactar o desempenho em dispositivos móveis.
A maioria dos navegadores modernos suporta a propriedade filter, mas é sempre bom verificar a compatibilidade para versões muito antigas.
Não, a ferramenta abstrai a sintaxe complexa, permitindo que você foque apenas nos valores visuais.
filter: blur(5px);Resultado
O elemento de fundo apresenta um desfoque suave, criando um efeito visual moderno e profissional.