Generador de glassmorphism (efecto cristal)
Diseña tarjetas y paneles de cristal esmerilado viendo el resultado al instante sobre distintos fondos. El CSS generado incluye el prefijo -webkit- que Safari todavía necesita.
Procesado 100% en tu navegador
El fondo se desenfoca detrás de esta tarjeta. Ajusta los controles y copia el CSS.
Ctrl + Enter ejecutarCtrl + C copiar resultado
Cómo usar
- 1Elige el color del cristal (blanco para fondos oscuros, negro para claros).
- 2Ajusta transparencia, desenfoque y saturación hasta conseguir el efecto deseado.
- 3Añade borde y sombra para separar el cristal del fondo, y prueba otros fondos.
- 4Copia el CSS o comparte el enlace con la configuración.
Casos de uso
- Tarjetas, modales y barras de navegación con estilo moderno.
- Paneles sobre fotos o vídeos sin perder legibilidad.
- Interfaces inspiradas en macOS, iOS o Windows 11.
- Prototipos rápidos para presentar a clientes.
Preguntas frecuentes
¿Qué es el glassmorphism?
Un estilo visual que imita el cristal esmerilado: un panel semitransparente que desenfoca lo que hay detrás mediante la propiedad CSS backdrop-filter, normalmente con un borde fino y una sombra suave.
¿Funciona en todos los navegadores?
backdrop-filter funciona en Chrome, Edge, Firefox y Safari actuales. Safari aún requiere el prefijo -webkit-backdrop-filter, que ya incluimos en el CSS.
¿Por qué no veo el efecto en mi web?
El desenfoque solo se aprecia si detrás del elemento hay contenido con detalle o color (una imagen, un degradado o formas). Sobre un fondo liso el cristal parece un simple color semitransparente.
¿Afecta al rendimiento?
backdrop-filter consume GPU. Úsalo en unos pocos elementos y evita desenfoques muy altos en áreas enormes, sobre todo en móviles de gama baja.