Generador de Glassmorphism
Crea tarjetas de efecto cristal (blur + transparencia) con vista previa en vivo. Ajusta cada parámetro y copia el CSS listo para usar.
Glassmorphism
Vista previa en vivo sobre tu fondo.
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
}Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
El generador de glassmorphism crea el código CSS del popular efecto «cristal esmerilado»: una superficie semitransparente que desenfoca lo que hay detrás usando backdrop-filter. Este estilo se hizo famoso con macOS Big Sur y Windows 11, y sigue siendo uno de los recursos más usados en interfaces modernas. La herramienta te permite ajustar la opacidad del fondo, la intensidad del desenfoque, el radio de las esquinas, el borde sutil que da el acabado luminoso y la sombra exterior. La vista previa se actualiza al instante sobre varios fondos de ejemplo para que compruebes cómo queda el contraste antes de copiar el código.
Características
- ✓Vista previa en vivo sobre fondos reales
- ✓Control de opacidad, blur, radio, borde y sombra
- ✓Salida con prefijo -webkit- incluido
- ✓5 fondos de ejemplo para probar el contraste
- ✓100% en el navegador, sin registro
¿Cómo generar un efecto glassmorphism?
- 1
Elige un fondo de prueba
Cambia entre los 5 fondos para ver cómo afecta al contraste.
- 2
Ajusta los valores
Opacidad, blur, radio, borde y sombra con los deslizadores.
- 3
Revisa la vista previa
El panel derecho muestra el resultado exacto en tiempo real.
- 4
Copia el CSS
Pega la clase .glass en tu hoja de estilos y aplícala donde quieras.
Preguntas frecuentes
¿Por qué mi efecto no se ve en algunos navegadores?
La propiedad backdrop-filter requiere navegadores modernos. El código generado incluye el prefijo -webkit-backdrop-filter para Safari; si necesitas soportar navegadores muy antiguos, añade un fondo de reserva más opaco con @supports.
¿El blur afecta al rendimiento?
Un backdrop-filter con radio grande fuerza al navegador a recomponer capas constantemente. En páginas con mucho scroll o muchos elementos de cristal, limita el área difuminada o reduce el valor de blur.
¿Se sube algo a un servidor?
No, el código se genera combinando tus opciones directamente en tu navegador.
Herramientas relacionadas
Incrusta Generador de Glassmorphism en tu web
Integra Generador de Glassmorphism en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/glassmorphism-generator"
width="100%"
height="700"
frameborder="0"
title="Generador de Glassmorphism — miguelacm.es"
></iframe>