Gerador de Glassmorphism

backdrop-filter: blur() é a propriedade CSS por trás do efeito de vidro fosco — um painel translúcido que desfoca o que se move atrás dele, em vez de apenas atenuar uma cor sólida. O problema é que a qualidade do desfoque é quase impossível de avaliar contra uma amostra estática; só se torna convincente quando algo está realmente a mover-se por trás, tal como numa página real com conteúdo, vídeo ou uma hero animada. Este gerador coloca o cartão de pré-visualização sobre um fundo genuinamente animado em vez de estático, para que o que vê enquanto arrasta os cursores seja o que os visitantes irão realmente experimentar.

O fundo é uma animação CSS real: um linear-gradient grande pintado a 400% do tamanho do elemento, com @keyframes a deslocar o background-position para trás e para a frente em ciclo — sem animação por JavaScript, sem canvas, apenas a mesma técnica contínua de background-position usada em hero sections de produção. Desfoque, cor e opacidade da tonalidade, cor/opacidade/largura do destaque do rebordo, raio do canto e suavidade da sombra controlam ao vivo os estilos do cartão flutuante, e a caixa de CSS pronto a copiar espelha exatamente os mesmos valores.

Nem todos os browsers suportam backdrop-filter, por isso o gerador também gera um bloco real @supports not (backdrop-filter: blur(1px)) — não é um gesto simbólico, mas uma regra de alternativa com a sua própria cor de fundo, calculada a partir da opacidade real da sua tonalidade. Como a translucidez sem desfoque tem um aspeto notoriamente pior (o que está por trás aparece sem desfoque), a alternativa aumenta automaticamente o canal alfa acima da opacidade de tonalidade que escolheu, e um comentário no CSS gerado explica exatamente porquê e em quanto.

Tudo é calculado e renderizado no seu próprio browser: sem envios, sem conta, sem comunicação com o servidor. Copie o CSS quando o cartão estiver com o aspeto pretendido, aplique-o a qualquer elemento que queira colocar sobre uma foto, vídeo ou gradiente, e mantenha o bloco @supports para que browsers mais antigos recebam um cartão legível e mais opaco, em vez de um quase invisível.