Generador de tarjetas glassmorphism
Crea tarjetas de cristal esmerilado con desenfoque y transparencia, y copia el CSS al instante
Con esta herramienta ajustas con deslizadores el desenfoque del fondo, la transparencia, la saturación, el borde y la sombra, y ves en tiempo real cómo queda una tarjeta con textura de cristal translúcido. Es ideal para diseñadores web y desarrolladores frontend que quieren experimentar rápido con componentes de estilo glassmorphism y llevarse el CSS listo para usar. Tanto los cálculos como la vista previa ocurren únicamente en tu navegador: no se envía ningún dato a un servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Elige uno de los seis degradados de fondo predefinidos.
- Ajusta los deslizadores de desenfoque, opacidad del fondo, saturación, redondeo de esquinas, grosor y opacidad del borde, y relleno interior.
- Define el color de tinte de la tarjeta con el selector de color y marca si quieres sombra.
- Cuando la vista previa te convenza, pulsa el botón de copiar del código CSS que aparece abajo y llévatelo tal cual.
Preguntas frecuentes
- ¿En qué navegadores se ve bien el CSS generado?
- Funciona correctamente en versiones recientes de Chrome, Edge, Safari y Firefox, que admiten backdrop-filter. Además, se genera también el prefijo -webkit-backdrop-filter para Safari.
- La tarjeta solo se ve borrosa y no percibo el efecto cristal.
- backdrop-filter desenfoca lo que hay «detrás» de la tarjeta, así que el efecto solo luce si detrás hay un fondo con color o imagen con cierto contraste. Sobre un fondo plano apenas se nota.
- ¿Puedo usar el CSS generado en un proyecto real?
- Sí. Puedes copiar el CSS y utilizarlo libremente en tus proyectos sin necesidad de indicar ninguna licencia ni atribución.