Gerador de Filtros CSS
Crie efeitos de filtro CSS visualmente — desfoque, brilho, contraste, escala de cinza e mais.
① Arraste os controles de filtro ② Faça upload da sua imagem ③ Copie o CSS
Predefinições
filter: none
1x
1x
1x
0
0
0px
0°
0
1
Saída CSS
filter: none;
backdrop-filter (glassmorfismo)
backdrop-filter: none;
O que é a propriedade CSS filter?
A propriedade CSS filter aplica efeitos gráficos a qualquer elemento HTML — imagens, divs, vídeos, SVGs ou seções inteiras. Suporta nove funções: blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), opacity() e saturate(). Múltiplos filtros são encadeados separados por espaço: filter: brightness(1.2) contrast(1.1) grayscale(0.3) — a ordem importa. A propriedade é acelerada por GPU. Nota: filter cria um novo contexto de empilhamento que pode afetar o z-index.
Perguntas Frequentes
A propriedade CSS filter aplica efeitos visuais: blur, brightness, contrast, grayscale, sepia, hue-rotate, invert, opacity e saturate.
Sim. CSS filter funciona em qualquer elemento HTML. Nota: filter cria contexto de empilhamento afetando z-index.
Liste funções separadas por espaço: filter: brightness(1.2) contrast(1.1) blur(2px). A ordem importa.
hue-rotate(Ndeg) desloca cores na roda de cores. 0deg = sem mudança, 180deg inverte.
CSS filter oferece efeitos simplificados. SVG filter é mais poderoso com operações arbitrárias.
CSS filter ativa composição GPU. blur() é o mais caro com valores grandes em elementos grandes.
filter: sepia(0.5) contrast(1.2) brightness(1.05). Preto e branco: filter: grayscale(1) contrast(1.1).