6XC

Gerador de Filtros CSS

Combine blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia e invert com pré-visualização em tempo real.

1.024 visualizações

6XC

A propriedade filter

filter aplica efeitos de edição de imagem a qualquer elemento — fotos, vídeos, até layouts inteiros. As funções se encadeiam em uma única declaração: filter: brightness(110%) contrast(120%) saturate(130%) dá um visual marcante estilo "Instagram", grayscale(100%) é o clássico estilo preto e branco, e hue-rotate recolore artes sem precisar de novos arquivos.

Perguntas Frequentes

filter afeta a performance?

A maioria dos filtros é acelerada por GPU e não causa problemas em poucos elementos. O blur é o mais custoso — mantenha o raio pequeno em superfícies grandes, especialmente no mobile.

Qual a diferença entre filter e backdrop-filter?

filter afeta o próprio elemento e seu conteúdo; backdrop-filter afeta o que aparece atrás do elemento — é isso que o glassmorphism usa.

Ferramentas Semelhantes

Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerar Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar