Generador Glassmorphism CSS
Diseña tarjetas con estética de vidrio esmerilado y profundidad moderna mediante CSS backdrop-filter.
Previsualización en Vivo
Efecto Cristal Esmerilado
Moderno componente con desenfoque de fondo y bordes translúcidos reflectantes.
blur: 16px
Código CSS Generado
css
background: rgba(255, 255, 255, 0.25);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15); Estilos Prediseñados
Propiedades del Cristal
16px
25%
Color de Fondo#ffffff
1px
30%
Color de Borde#ffffff
20px
32px
15%
180%
Cómo aplicar Glassmorphism en tu CSS
Tres sencillos pasos para dotar a tus interfaces de modernidad y profundidad visual.
1
Ajusta el desenfoque y la opacidad
Selecciona la cantidad de blur para backdrop-filter y el nivel de transparencia del color base.
2
Refina bordes y sombras sutiles
Los bordes semitransparentes delgados otorgan el clásico reflejo de bisel que define al vidrio.
3
Copia el código con prefijo webkit
Usa tanto -webkit-backdrop-filter como backdrop-filter para soporte impecable en Safari y navegadores Chromium.
100% Privado y Local
Generación instantánea en tu navegador
El renderizado ocurre en tu dispositivo sin llamadas a servidores externos. Cero recolección de datos.
Preguntas Frecuentes sobre Glassmorphism
La propiedad principal es backdrop-filter: blur(...), que desenfoca los elementos gráficos ubicados detrás del contenedor.
Navegadores como Safari (en macOS e iOS) requieren el prefijo -webkit- para activar correctamente la aceleración por hardware del desenfoque de fondo.
El vidrio requiere contraste y elementos gráficos o colores detrás para que el desenfoque sea perceptible. Usa fondos degradados o con textura.
Un desenfoque moderado (10px a 25px) suele estar optimizado por GPU en los navegadores modernos. Evita anidar demasiadas capas de cristales superpuestos.