Gerador de Glassmorphism

Crie o efeito de vidro fosco (glassmorphism) e obtenha o código CSS ou as classes Tailwind.

Ajustes de Estilo

Desfoque (Blur)12px

Opacidade do Fundo25%

Opacidade da Borda20%

Raio da Borda24px

Espessura da Borda1px

Cor do Fundo

#ffffff

Cor da Borda

#ffffff

Desfoque da Sombra32px

Opacidade da Sombra15%

Conteúdo do Preview

Glass Card

4452 •••• •••• 8892

Validade: 12/29CVV: 332

Código CSS

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);

Classes Tailwind

bg-white/[0.25] backdrop-blur-[12px] rounded-[24px] border-[1px] border-white/[0.20] shadow-[0_8px_32px_0_rgba(0,0,0,0.15)]