Gerador de Glassmorphism
Pegue o vidro fosco, procure por cartões e painéis, e veja-o sobre o seu próprio fundo.
- Seus dados nunca saem do seu dispositivo
- 100% grátis
- Sem cadastro
- Funciona offline após a primeira carga
Como fazer um efeito vítreo-morfismo
- Ajuste o borrão, a transparência, a saturação e o tom.
- Visualize-o no fundo colorido ou na sua própria imagem.
- Copie o CSS, Tailwind ou SCSS.
Sobre: Gerador de glassmorphism
Faça efeitos CSS de vidro fosco.
Tudo funciona no seu navegador, por isso é instantâneo e privado. Suas cores e configurações recentes são lembradas neste dispositivo, e a barra de endereço mantém sua cor para que você possa compartilhá-la ou marcá-la.
Ideal para
- Cartas de heróis e sobreposições
- Barras de navegação e modais
- Dashboards e widgets
Dica: Mantenha contraste suficiente: adicione uma tonalidade mais escura ou texto escuro quando o plano de fundo estiver claro.
Perguntas frequentes
Como funciona o efeito de vidro?
Um fundo semi-transparente mais um filtro de fundo: blur() desfoca o que estiver por trás do elemento. Uma borda clara e uma sombra suave fazem a borda ser lida como vidro.
Funciona em todos os navegadores?
O filtro de fundo funciona em todos os navegadores atuais; o código inclui o prefixo -webkit- para o Safari. Onde não é suportado, o cartão simplesmente mostra sua cor translúcida.
Por que não posso ver o efeito?
O vidro precisa de algo por trás disso. — Use o fundo colorido ou sua própria imagem para visualizá-lo.
Qual fundo funciona melhor?
Um colorido ou detalhado, como uma foto ou gradiente, torna o borrão visível. Em uma cor simples, o vidro parece uma caixa plana e transparente.
O Glassmorphism é acessível?
Use o tom suficiente e verifique a cor do texto contra a parte mais movimentada do fundo com o verificador de contraste.