Generador de cristalmorfismo
Obtener el aspecto de vidrio esmerilado para tarjetas y paneles, y verlo sobre su propio fondo.
- Tus datos nunca salen de tu dispositivo
- 100 % gratis
- Sin registro
- Funciona sin conexión después de la primera carga
Cómo hacer un efecto de cristalmorfismo
- Ajuste el desenfoque, la transparencia, la saturación y el tinte.
- Vista previa en el fondo colorido o su propia imagen.
- Copie el CSS, Tailwind o SCSS.
Acerca de Generador de glassmorphism
Realiza efectos CSS de vidrio esmerilado.
Todo funciona en su navegador, por lo que es instantáneo y privado. Sus colores y configuraciones recientes se recuerdan en este dispositivo, y la barra de direcciones mantiene su color para que pueda compartirlo o marcarlo.
Ideal para
- Cartas de héroe y superposiciones
- Barras de navegación y modales
- Paneles y widgets
Consejo: Mantenga suficiente contraste: agregue un tono más oscuro o texto oscuro cuando el fondo sea claro.
Preguntas frecuentes
¿Cómo funciona el efecto vidrio?
Un fondo semitransparente más filtro de fondo: desenfoque() difumina todo lo que está detrás del elemento. Un borde claro y una sombra suave hacen que el borde se lea como vidrio.
¿Funciona en todos los navegadores?
telón de fondo-filtro funciona en todos los navegadores actuales; el código incluye el prefijo -webkit- para Safari. Donde no es compatible, la tarjeta simplemente muestra su color translúcido.
¿Por qué no puedo ver el efecto?
El vidrio necesita algo detrás de él — utilice el fondo colorido o su propia imagen para obtener una vista previa.
¿Qué fondo funciona mejor?
Uno colorido o detallado, como una foto o un degradado, hace que el desenfoque sea visible. Sobre un color liso, el vidrio parece una caja plana transparente.
¿Es accesible el glasmorfismo?
Solo si el texto se mantiene legible. Use suficiente tinte y verifique el color del texto contra la parte más ocupada del fondo con el comprobador de contraste.