Criador de Cartões Glass

Cartões glassmorphism com desfoque, gradientes e pré-visualização.

Propriedades do cartão

Desfoque de fundo: 10px

Opacidade do fundo: 7%

Opacidade da borda: 30%

Raio da borda: 20px

Largura da borda: 1px

Opacidade do brilho interno: 5%

Cor de fundo

Cor da borda

Conteúdo dos elementos do cartão

Cartão de vidro

Um componente interativo premium com refração sutil e realces de borda.

.glass-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 40px 20px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  padding: 24px;
  color: #ffffff;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

Como funciona

Ajuste blur, realces, brilhos internos e fundo para um card em glassmorphism.
Veja a pré-visualização ao vivo atualizar conforme você regula.
Combine o efeito com o seu design.
Copie HTML e CSS limpos, ou uma configuração do Tailwind.

Para que serve

Montar um card de vidro fosco para uma UI moderna.
Obter CSS de produção para um efeito de glassmorphism.
Exportar um componente de vidro pronto para o Tailwind.

Bom saber

O visual de vidro depende do backdrop-filter e de um fundo carregado atrás dele — sobre uma cor chapada, o efeito é sutil.
O suporte a backdrop-filter varia; teste nos seus navegadores-alvo e forneça um fallback.

Perguntas frequentes

Que saída posso copiar?

HTML limpo, CSS puro ou uma configuração do Tailwind — o que combinar com a sua stack.

Por que o vidro parece chapado na minha página?

O glassmorphism precisa de conteúdo visual atrás dele para desfocar. Sobre um fundo sólido, não há o que embaçar, então coloque-o sobre uma imagem ou gradiente.

Algo é enviado?

Não. O construtor roda inteiramente no seu navegador.

Ferramentas relacionadas

Visualizador de DXF

Paleta de Cores

Conversor de Cores

Gerador de Box Shadow CSS

Verificador de Contraste