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.
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.