ZenovayTools

Gerador de Filtros CSS

Gere efeitos de filtro CSS com pré-visualização ao vivo. Ajuste desfoque, brilho, contraste, escala de cinza, rotação de matiz, inverter, saturação, sépia e sombra de queda.

Presets

Filters

Blur0px
Brightness100%
Contrast100%
Grayscale0%
Hue Rotate0deg
Invert0%
Opacity100%
Saturate100%
Sepia0%

Preview

Original

Original

Filtered

Filtered
CSS Code
filter: none;

Como Usar Gerador de Filtros CSS

  1. 1Ajuste os controles deslizantes de filtro (desfoque, brilho, contraste, etc.).
  2. 2Veja o efeito aplicado a uma imagem de amostra em tempo real.
  3. 3Combine múltiplos filtros para efeitos complexos.
  4. 4Copie a propriedade de filtro CSS gerada.
ZenovayAnalytics

Saiba o que seus visitantes realmente fazem.

  • Acompanhamento de visitantes em tempo real
  • Privacidade em primeiro lugar, sem banner de cookies
  • Configurado em dois minutos
Conheça o Zenovay

Ferramentas Relacionadas

Gerador de Gradientes CSS
Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.
Gerador de CSS Box Shadow
Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.
Gerador de CSS Border Radius
Crie valores personalizados de border radius com controles visuais. Vincule ou desvinque os cantos para ajuste rápido.
Área de Testes CSS Flexbox
Aprenda e gere layouts CSS Flexbox visualmente. Ajuste direção, alinhamento, quebra de linha e espaçamento em tempo real.

Perguntas Frequentes

O que é a propriedade de filtro CSS?▾
A propriedade de filtro CSS aplica efeitos visuais como desfoque, brilho, contraste e mudanças de cor a elementos. Funciona em qualquer elemento: imagens, divs, texto, vídeos, SVGs. Os filtros são aplicados na ordem listada e podem ser combinados. Suportado em todos os navegadores modernos desde 2015.
Quais filtros CSS estão disponíveis?▾
Filtros padrão: blur(px), brightness(%), contrast(%), grayscale(%), hue-rotate(deg), invert(%), opacity(%), saturate(%), sepia(%), drop-shadow(x y blur color). Além disso, url() pode fazer referência a filtros SVG para efeitos personalizados.
Qual é a diferença entre filter e backdrop-filter?▾
filter aplica efeitos ao elemento em si e seu conteúdo. backdrop-filter aplica efeitos à área atrás do elemento (usado para glassmorfismo). Por exemplo, filter: blur(5px) desenfoca o elemento; backdrop-filter: blur(5px) desenfoca o que é visível através de um elemento semi-transparente.
Os filtros CSS afetam o desempenho?▾
Filtros acionam aceleração de GPU, que é eficiente para elementos estáticos, mas pode ser cara quando animada. blur() é o filtro mais intensivo em desempenho. Melhores práticas: evite grandes raios de desfoque em elementos grandes, use will-change: filter para animações, evite filtrar elementos com muitos descendentes.
Como criar um filtro semelhante ao Instagram?▾
Combine múltiplos filtros CSS para replicar efeitos fotográficos. Exemplo "Nashville": brightness(1.1) contrast(1.2) saturate(1.35) sepia(0.25). Exemplo "Clarendon": brightness(1.25) contrast(1.2) saturate(1.35). Empilhe 2-4 filtros e ajuste valores para criar aparências únicas.