Convertidor Gratuito
CSS Glassmorphism Generador
Crea impresionantes efectos de tarjetas glassmorphism con vista previa en tiempo real.
Vista previa
Glassmorphism Card
Beautiful frosted glass effect with customizable settings.
Learn MoreColor de fondo
#FFFFFF
Opacidad del fondo15%
0%50%100%
Cantidad de desenfoque16px
0px20px40px
Color del borde
#FFFFFF
Opacidad del borde20%
0%50%100%
Radio del borde20px
0px30px60px
Intensidad de sombra30%
0%40%80%
CSS generado
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.20);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
padding: 2rem;
}