Generador de glassmorphism CSS
Crea el efecto de vidrio esmerilado con controles en vivo para desenfoque, transparencia, color, saturación, borde y sombra. Arrastra la tarjeta sobre un fondo colorido o sobre tu propia imagen y copia CSS limpio, clases de Tailwind o un fragmento HTML listo para usar.
Última actualización:
Tarjeta de vidrio
El vidrio esmerilado desenfoca todo lo que hay detrás. Arrástrame.
EmpezarTu navegador no admite backdrop-filter, así que aquí no se ve el desenfoque. El CSS sigue funcionando en los navegadores actuales.
Cómo usar Generador de glassmorphism CSS
- Elige un ajuste predefinido o empieza con la tarjeta esmerilada por defecto.
- Mueve los controles: el desenfoque suaviza lo que hay detrás de la tarjeta, la transparencia define cuánto tinte se ve y la saturación hace resaltar los colores de detrás.
- Cambia el fondo o sube una imagen para probar el efecto en tu diseño real. Arrastra la tarjeta para verla sobre distintas zonas.
- Ajusta el borde y la sombra para dar al vidrio un borde nítido y profundidad.
- Copia el CSS, las clases de Tailwind o el fragmento HTML y pégalo en tu proyecto.
Cómo funciona el efecto vidrio
Cuatro propiedades CSS trabajan juntas. background con un valor alfa (por ejemplo rgba(255, 255, 255, 0.2)) da el tinte claro. backdrop-filter: blur() desenfoca todo lo que se pinta detrás del elemento, lo que crea el aspecto esmerilado, y saturate() en el mismo filtro intensifica los colores que se transparentan. Un border blanco fino y semitransparente imita la luz en el borde del vidrio, y un box-shadow suave eleva la tarjeta sobre la página.
| Ajuste | CSS | Rango típico |
|---|---|---|
| Desenfoque | backdrop-filter: blur(12px) | 8–20px |
| Transparencia | background: rgba(255, 255, 255, 0.2) | 0.1–0.4 para vidrio claro |
| Saturación | saturate(180%) | 120–200% |
| Borde | 1px solid rgba(255, 255, 255, 0.3) | opacidad 0.2–0.5 |
| Sombra | 0 8px 32px rgba(0, 0, 0, 0.1) | opacidad 0.05–0.25 |
Consejos de diseño
- Dale algo que desenfocar. El vidrio solo parece vidrio sobre color: degradados, formas desenfocadas o fotos. Sobre una página blanca lisa solo se ve gris.
- Mantén el texto legible. Aumenta la opacidad del tinte o cambia a vidrio oscuro con texto claro cuando el fondo esté recargado. Busca una relación de contraste de al menos 4.5:1 para el texto principal.
- Úsalo con moderación. El vidrio funciona mejor en unas pocas capas flotantes como barras de navegación, ventanas modales y tarjetas, no en todos los elementos.
- Ofrece una alternativa. Envuelve el efecto en
@supports (backdrop-filter: blur(1px)) { … }y usa un fondo más opaco en caso contrario, y considera@media (prefers-reduced-transparency: reduce)donde sea compatible.
Preguntas frecuentes
¿Qué es el glassmorphism?
El glassmorphism es un estilo de interfaz en el que las tarjetas parecen vidrio esmerilado: un fondo semitransparente, un desenfoque de lo que haya detrás del elemento, un borde claro sutil y una sombra suave. Se popularizó con macOS Big Sur, Windows 11 (Acrylic y Mica) e iOS.
¿Qué propiedad CSS crea el efecto de vidrio esmerilado?
backdrop-filter: blur() desenfoca el contenido que hay detrás de un elemento. Solo se ve cuando el fondo del propio elemento es parcialmente transparente, por ejemplo background: rgba(255, 255, 255, 0.2). Añadir saturate() al mismo backdrop-filter hace que los colores de detrás sean más vivos.
¿backdrop-filter funciona en todos los navegadores?
Sí, en las versiones actuales de Chrome, Edge, Firefox (desde la versión 103) y Opera. Safari lo admite con el prefijo -webkit-backdrop-filter y, desde Safari 18, también sin él. Por eso el CSS generado incluye ambas líneas.
¿Por qué no se ve mi efecto de vidrio?
Las causas más comunes son un fondo totalmente opaco en el elemento, que no haya nada colorido detrás para desenfocar, o un elemento padre con reglas de overflow o transform que cambian el fondo. Asegúrate de que el color de fondo use rgba() o un color hex con alfa y de que haya una imagen o un degradado detrás de la tarjeta.
¿El glassmorphism es accesible?
Puede serlo si el contraste del texto se mantiene alto. Usa suficiente tinte (más opacidad) o un vidrio oscuro con texto claro, evita fondos recargados detrás de texto pequeño y comprueba el contraste con un verificador de contraste de color. Considera una alternativa sólida para los usuarios que activan la transparencia reducida.
¿backdrop-filter afecta al rendimiento?
El desenfoque lo hace la GPU y va bien con unos pocos elementos. Radios de desenfoque muy grandes, muchas capas de vidrio superpuestas o animarlas en teléfonos de gama baja pueden reducir la tasa de fotogramas, así que mantén un desenfoque moderado y pocos elementos de vidrio.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.