Generador de Glassmorphism
Crea efectos de glassmorphism personalizados gratis. Ajusta blur, refracción, profundidad y copia el CSS generado para usar en tus proyectos.
Configuraciones
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)
);
}¿Qué es Glassmorphism?
Glassmorphism es una tendencia de diseño que crea elementos con efecto de vidrio translúcido y desenfocado, creando una sensación de profundidad y modernidad. Este efecto es popular en interfaces modernas y da un aspecto elegante a tus proyectos.
Características del Glassmorphism
- •Efecto de vidrio translúcido con blur en el fondo
- •Bordes sutiles y semi-transparentes
- •Crea sensación de profundidad y capas
- •Ideal para cards, modales y paneles modernos
- •Funciona bien con fondos de color o degradados
Consejos de Uso
- •Ajusta el blur para controlar la nitidez del efecto
- •La refracción controla la transparencia del elemento
- •La profundidad ajusta el tamaño del elemento
- •Usa fondos de color para mejor visualización
- •Combina con sombras para más profundidad