Gerador de morfofismo CSS

O CSS GlassMorphism Generator é um editor visual do estilo de interface de vidro fosco, onde uma superfície translúcida se desfoca o que está por trás dela. Você ajusta o desfoque de fundo, a transparência, a saturação, a cor do tom e o raio de canto com controle deslizantes, assiste a uma atualização de pré-visualização sobre um fundo colorido e copia o CSS exato que ele produz.

O GlassMorphism depende da propriedade do filtro de pano de fundo, que aplica um borrão ao conteúdo por trás de um elemento e não ao próprio elemento. Combinado com um fundo semitransparente, uma borda de linha do cabelo e uma sombra suave, ele produz o visual em camadas de vidro popularizado pelos sistemas operacionais modernos. Obter o equilíbrio à mão é complicado, então essa ferramenta gerencia todos os valores e gera um bloco limpo e copiável.

Tudo é executado no seu navegador Escolha uma predefinição como Frosted, Dark ou Vibrant, ajuste os controles deslizantes e copie o CSS - incluindo o - webkit-prefixed background-filter para um suporte mais amplo Nenhuma conta, sem uploads, e ele continua funcionando offline uma vez que a página tenha carregado.

O efeito depende de duas propriedades trabalhando juntas, e falha silenciosamente se alguma delas estiver faltando O filtro de backdrop desfoca tudo o que está por trás do elemento, por isso precisa de uma cor de fundo parcialmente transparente para mostrar: em plena opacidade não há nada para ver, e sem fundo algum a superfície desaparece Também precisa de algo por trás que valha a pena desfocar, e é por isso que o efeito parece um painel plano sobre um fundo liso e ganha vida sobre uma fotografia Dois custos práticos O desfoque de backdrop é uma das coisas mais caras para compor, particularmente sobre uma grande área ou durante a rolagem E o texto em uma superfície translúcida tem uma relação de contraste que muda com o que passa por baixo, para que possa passar por uma verificação de contraste contra um fundo e falhar contra outro.

Como um gerador CSS de glassmorfismo, ele começa a partir da predefinição Frosted, e o bloco copiado para essa predefinição diz: background: rgba (255, 255, 255, 0.2); background-filter: blur (10 px) saturate (120%); o mesmo valor novamente que -webkit-backdrop-filter; border-radius: 16 px; border: 1 px solid rgba (255, 255, 255, 0.18); e box-shadow: 0 8 px 32 px rgba (0, 0, 0, 0.12). Clique em Dark e o fundo muda para rgba (15, 23, 42, 0.25) com um borrão de 12 px, que é a versão para usar uma foto leve.