Gerador de Glassmorphism

Crie efeitos de glassmorphism personalizados gratuitamente. Ajuste blur, refraction, depth e copie o CSS gerado para usar em seus projetos.

Preview

Configurações

9
0.09
9
.glass-card {
  width: 240px;
  height: 360px;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px 9px rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}

.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)
  );
}

O que é Glassmorphism?

Glassmorphism é uma tendência de design que cria elementos com efeito de vidro translúcido e desfocado, criando uma sensação de profundidade e modernidade. Este efeito é popular em interfaces modernas e dá um visual elegante aos seus projetos.

Características do Glassmorphism

  • Efeito de vidro translúcido com blur no fundo
  • Bordas sutis e semi-transparentes
  • Cria sensação de profundidade e camadas
  • Ideal para cards, modais e painéis modernos
  • Funciona bem com backgrounds coloridos ou gradientes

Dicas de Uso

  • Ajuste o blur para controlar a nitidez do efeito
  • A refração controla a transparência do elemento
  • A profundidade ajusta o tamanho do elemento
  • Use backgrounds coloridos para melhor visualização
  • Combine com sombras para mais profundidade