Escolha filter ou backdrop-filter, use um preset e ajuste os controles acompanhando a prévia. Copie as declarações CSS para aplicar o efeito à sua página.
Funciona localmente no seu navegadorA bancada monta uma única declaração filter a partir de oito funções: brilho, contraste, saturação, escala de cinza, sépia, rotação de matiz, desfoque e opacidade. Escolha primeiro a propriedade — filter pinta no próprio elemento e backdrop-filter no que está atrás dele — depois mova os controles e acompanhe a prévia ao vivo.
O painel de saída guarda a declaração pronta: uma linha filter, ou as duas linhas de backdrop-filter com o prefixo -webkit- que o Safari ainda exige. Copie para a sua regra. Nada sai do navegador e a página continua funcionando offline.
filter se aplica ao elemento e a tudo o que ele pinta, incluindo filhos e texto. backdrop-filter não toca no elemento: filtra os pixels que estão atrás dele, e é por isso que um painel de vidro precisa de fundo semitransparente para o efeito aparecer.
O suporte não é idêntico: o Safari ainda exige o prefixo -webkit-backdrop-filter, e o painel de exportação escreve as duas linhas por isso. Quando um motor não suporta a propriedade, ele ignora a declaração e o elemento aparece normal — trate o vidro como decoração, não como estrutura.
Cada controle corresponde a uma função CSS: brilho, contraste e saturação usam porcentagens em torno do neutro 100%; escala de cinza, sépia e opacidade vão de 0 a 100%; a rotação de matiz aceita graus de -360 a 360; o desfoque, pixels em passos de 0.5. A ordem é fixa e a aplicação segue essa ordem, então hue-rotate(-8deg) antes de blur(14px) nem sempre dá o mesmo resultado que a ordem inversa.
Funções mantidas no valor neutro ficam fora da saída. Ainda assim é uma única declaração: cada função transforma o resultado da anterior, não os pixels originais.
Cada campo é limitado à sua faixa antes de o CSS ser escrito: brilho e contraste de 0 a 300, saturação de 0 a 500, escala de cinza, sépia e opacidade de 0 a 100, rotação de matiz de -360 a 360 e desfoque de 0 a 40 em passos de 0.5. Digitar -5 no desfoque ou 500 na escala de cinza volta para 0 e 100 quando o campo perde o foco, e um campo vazio recupera o valor anterior. Isso mantém a declaração exportada válida: o navegador descarta o filtro inteiro quando uma função traz um valor que ele não consegue interpretar.
filter e backdrop-filter são compostos na GPU, e o desfoque é a função cara: um backdrop blur de 14px sobre uma área grande pode custar mais do que todo o resto somado, principalmente durante a rolagem. Mantenha a superfície desfocada pequena e teste no aparelho mais lento que você suporta.