Generador de Glassmorphism CSS
Crea impresionantes efectos de UI tipo vidrio con backdrop-filter y transparencia.
① Ajusta blur y opacidad ② Elige color y borde ③ Copia el CSS
Glassmorphism
backdrop-filter: blur(12px)
Presets:
12px
18%
180%
30%
16px
Código CSS
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
}¿Qué es el Glassmorphism?
El glassmorphism es una tendencia de diseño UI que crea una apariencia de vidrio esmerilado usando CSS backdrop-filter, fondos semi-transparentes y bordes sutiles. Propiedades clave: backdrop-filter: blur(12px) saturate(180%) desenfoca el contenido detrás. background: rgba(255,255,255,0.18) define el relleno translúcido. border: 1px solid rgba(255,255,255,0.3) añade el borde de vidrio. Safari requiere -webkit-backdrop-filter. Incluye siempre un fallback con @supports para navegadores más antiguos.
Preguntas Frecuentes
El glassmorphism es un estilo UI que simula vidrio esmerilado usando CSS backdrop-filter con desenfoque, fondos de color semi-transparentes y bordes translúcidos delgados.
Las propiedades clave son: backdrop-filter: blur(10px), background: rgba(255,255,255,0.15), border: 1px solid rgba(255,255,255,0.3).
backdrop-filter es compatible con Chrome, Firefox 103+, Edge y Safari (con prefijo -webkit-). Incluye siempre ambas versiones para máxima compatibilidad.
Usa @supports: @supports not (backdrop-filter: blur(1px)) { .glass { background: rgba(255,255,255,0.9); } }
El glassmorphism requiere contenido DETRÁS del elemento de vidrio. Coloca el elemento sobre una imagen o degradado para ver el efecto.
Valores entre 8px y 20px crean el aspecto de vidrio más natural. 10–16px es el punto óptimo común.
Añade box-shadow: box-shadow: 0 8px 32px rgba(0,0,0,0.15). Combina sombras internas (inset) con externas para un convincente efecto de panel de vidrio.