Generador de tarjetas Glassmorphism
Diseña una tarjeta de cristal esmerilado con sliders y copia el CSS
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta permite ajustar el desenfoque, la opacidad, la saturación, el borde y la sombra con controles deslizantes mientras se previsualiza una tarjeta de cristal esmerilado en tiempo real. Resulta útil para diseñadores web y desarrolladores frontend que quieren prototipar rápido un componente UI glassmorphism y obtener el CSS listo para usar. Todo el proceso ocurre en el navegador, sin enviar datos a ningún servidor.
Cómo usar
- Elige uno de los seis fondos degradados predefinidos.
- Ajusta los sliders de desenfoque, opacidad de fondo, saturación, radio de borde, grosor/opacidad de borde y relleno.
- Selecciona el color del tinte de la tarjeta con el selector de color y activa o desactiva la sombra.
- Cuando la vista previa te guste, copia el CSS generado con el botón de abajo.
Preguntas frecuentes
- ¿En qué navegadores funciona el CSS generado?
- Funciona en versiones modernas de Chrome, Edge, Safari y Firefox compatibles con backdrop-filter. Se incluye el prefijo -webkit-backdrop-filter para Safari.
- La tarjeta solo se ve borrosa, no como cristal, ¿por qué?
- backdrop-filter desenfoca lo que hay detrás de la tarjeta, así que necesitas un fondo colorido o una imagen detrás para que se note el efecto cristal.
- ¿Puedo usar el CSS generado en mi propio proyecto?
- Sí, puedes copiar y usar el CSS libremente en cualquier proyecto sin necesidad de atribución.