Gerador de morfismo de vidro

background-filter: blur() é a propriedade CSS por trás da aparência de vidro fosco - um painel translúcido que desfoca tudo o que se move atrás dele, em vez de apenas desbotar uma cor plana. O problema é que a qualidade do desfoque é quase impossível de avaliar em relação a uma amostra estática; só parece convincente quando algo está realmente se movendo por baixo dele, como acontece em uma página real com conteúdo, vídeo ou um herói animado. Este gerador coloca o cartão de visualização sobre um fundo genuinamente animado em vez de um fundo estático, de modo que o que você vê ao arrastar os controles deslizantes é o que os visitantes realmente experimentarão.

O plano de fundo é uma animação CSS real: um grande gradiente linear pintado em 400% do tamanho do elemento, com @keyframes mudando sua posição de plano de fundo para frente e para trás em um loop - sem loop de animação JavaScript, sem tela, apenas a mesma técnica contínua de posição de plano de fundo usada nas seções de herói de produção. Desfoque, tonalidade e opacidade, cor/opacidade/largura de destaque da borda, raio do canto e suavidade da sombra, todos orientam os estilos dinâmicos do cartão flutuante, e a caixa CSS copiável reflete exatamente os mesmos valores.

Nem todo navegador suporta filtro de pano de fundo, então o gerador também emite um bloco @supports not (backdrop-filter: blur(1px)) real - não um gesto simbólico, mas uma regra de fallback com sua própria cor de fundo calculada a partir da opacidade real da tonalidade. Como a translucidez sem desfoque parece visivelmente pior (o que quer que esteja por trás dela aparece sem desfoque), o substituto eleva automaticamente o canal alfa acima da opacidade da tonalidade escolhida e um comentário no CSS gerado explica exatamente por que e por quanto.

Tudo é computado e renderizado em seu próprio navegador: sem upload, sem conta, sem ida e volta ao servidor. Copie o CSS quando o cartão parecer correto, solte-o em qualquer elemento que você deseja colocar acima de uma foto, vídeo ou gradiente e mantenha o bloco @supports para que navegadores mais antigos ainda obtenham um cartão legível e mais opaco, em vez de um cartão pouco visível.