Gerador de Filtro CSS
Uma ferramenta visual para gerar e visualizar propriedades de filtro CSS.
Configurações de Filtro
Ajuste cada propriedade de filtro
Predefinições
Experimente estilos de filtro predefinidos
Visualizar
Veja os efeitos de filtro gerados na imagem padrão
Original
Filtrado
Filter Preview
CSS Gerado
filter: none;Funções de Filtro CSS Explicadas
Efeitos Visuais
- • blur(px): Efeito de desfoque
- • brightness(%): Ajuste de brilho
- • contrast(%): Ajuste de contraste
- • opacity(%): Ajuste de opacidade
Efeitos de Cor
- • grayscale(%): Efeito de escala de cinza
- • hue-rotate(deg): Rotação de matiz
- • invert(%): Inversão de cor
- • saturate(%): Ajuste de saturação
- • sepia(%): Efeito sépia
Dicas de Uso
- • Combine vários filtros separados por espaços
- • Aplique a qualquer elemento HTML, não apenas a imagens
- • Use com animações CSS para efeitos dinâmicos
- • Use backdrop-filter para aplicar apenas a fundos