Gere visualmente efeitos de CSS de vidro fosco para a sua interface de utilizador.
Ajusta três controlos deslizantes — desfoque, transparência e opacidade da borda — e vê o efeito de vidro fosco atualizar em tempo real. Quando ficares satisfeito com o aspeto, copia o CSS pronto a usar.
Usa os três controlos para ajustar a quantidade de desfoque, transparência e opacidade da borda. A caixa de pré-visualização atualiza em tempo real. Copia o CSS gerado da caixa de texto no final do painel.
Uma interface em estilo glass funciona melhor quando parece intencional e não meramente ornamental. Um painel precisa de blur suficiente para se separar do fundo, opacidade suficiente para suportar conteúdo legível e definição de borda suficiente para manter a sua forma. Essas decisões são visuais, subtis e difíceis de tomar a partir de valores CSS crus.
Esta ferramenta permite-lhe afinar diretamente essa superfície e levar o CSS resultante para uma interface real.
Painéis de vidro são muitas vezes usados para destacar texto ou controlos de uma imagem ou de um fundo colorido sem o bloquear por completo.
Menus, painéis laterais e cartões flutuantes por vezes beneficiam de parecer mais leves do que um bloco sólido de cor.
Se um produto usa camadas translúcidas, precisa muitas vezes de uma forma repetível de comparar variantes subtis em vez de reinventar o efeito componente a componente.
Um blur forte pode parecer sofisticado numa demo e continuar a sentir-se pesado ou distrativo numa interface real.
Se o fundo atravessa demasiado, o efeito deixa de ajudar a legibilidade e começa a prejudicá-la.
Numa UI em estilo glass, o tratamento da borda costuma fazer mais trabalho do que parece. Sem definição suficiente, o painel perde forma.
É aqui que o efeito pode ser genuinamente útil: separação suave sem um bloco totalmente opaco.
Alguns layouts beneficiam de uma superfície mais leve, mas apenas se o painel continuar legível sobre conteúdo real.
Se o efeito faz parte de uma linguagem visual mais ampla, a consistência importa mais do que um único exemplo dramático.
Esta ferramenta gera o CSS visual para um efeito glass. Não garante contraste de texto, não resolve compromissos de desempenho em dispositivos mais fracos e não decide se o efeito é uma boa escolha de design. Ajuda a afinar o tratamento, não a justificá-lo.
Bem feito, o efeito glass cria separação sem peso visual. Mal feito, reduz a legibilidade. Um gerador é útil porque a linha entre os dois resultados costuma estar em pequenos ajustes, não em grandes ideias.
O glassmorphism requer um fundo colorido ou baseado em imagem por trás do elemento. Num fundo branco simples, o desfoque não tem nada sobre o que atuar e o efeito não é visível.
Sim — em todos os browsers modernos (Chrome, Firefox, Safari, Edge). O CSS gerado inclui automaticamente o prefixo -webkit- para Safari.
Esta ferramenta funciona inteiramente no seu navegador. Nada do que escreve ou cola é enviado para qualquer servidor — todo o processamento ocorre localmente no seu dispositivo.