Generador de glassmorphism – CSS de efecto cristal esmerilado
Diseña tarjetas y paneles de cristal esmerilado con vista previa en vivo. Ajusta desenfoque, transparencia, saturación, borde y radio sobre un fondo colorido y copia un CSS listo para producción.
Mueve los controles de desenfoque, transparencia, saturación, opacidad del borde y radio, y elige el color del cristal. La tarjeta se actualiza en vivo. Copia el CSS: incluye un fondo semitransparente, backdrop-filter con el prefijo -webkit- para Safari, un borde sutil y una sombra suave opcional.
Cómo usar la herramienta: Generador de glassmorphism
- Elige un fondo para la vista previa.
- Ajusta el desenfoque y la transparencia.
- Ajusta la saturación, el borde y el radio.
- Elige el color del cristal y activa o no la sombra.
- Copia el CSS y aplícalo a tu tarjeta o panel.
¿Qué es el glassmorphism?
El glassmorphism es un estilo de diseño que imita el cristal esmerilado: una superficie semitransparente que desenfoca lo que hay detrás, a menudo con un borde claro fino y una sombra suave. Se popularizó con macOS Big Sur y Windows 11 y luce mejor sobre fondos coloridos y variados.
El CSS que hay detrás
El efecto se consigue con `backdrop-filter`, que desenfoca el contenido que queda detrás del elemento. Un fondo semitransparente deja ver ese contenido borroso.
| Propiedad | Función | Valor típico |
|---|---|---|
| background | Superficie tintada y translúcida | rgba(255, 255, 255, 0.15–0.3) |
| backdrop-filter | Desenfoca lo de detrás | blur(8–16px) saturate(150–180%) |
| border | Brillo del borde | 1px solid rgba(255, 255, 255, 0.3) |
| border-radius | Esquinas suaves | 12–24px |
| box-shadow | Eleva el panel | 0 8px 32px rgba(0, 0, 0, 0.18) |
Safari todavía necesita `-webkit-backdrop-filter`, por eso el generador incluye ambas líneas.
Legibilidad y accesibilidad
Los paneles de cristal cambian según lo que tengan detrás, así que el contraste del texto puede variar dentro de la tarjeta. Usa más desenfoque, un fondo menos transparente o un tinte más oscuro detrás de los textos largos, y revisa el resultado con el Comprobador de contraste de color. Respeta a quienes activan la transparencia reducida en su sistema: `@media (prefers-reduced-transparency: reduce)` te permite usar un fondo sólido.
Rendimiento
El desenfoque lo hace la tarjeta gráfica y es rápido para unos pocos elementos, pero muchas capas grandes desenfocadas, sobre todo animadas, pueden ralentizar móviles antiguos. Usa el cristal en superficies clave como barras de navegación, ventanas modales y tarjetas destacadas.
Dónde funciona mejor
Barras de navegación sobre imágenes, tarjetas de inicio de sesión sobre degradados y paneles de reproductores de música son usos ideales. Sobre un fondo blanco liso no hay nada que desenfocar y el efecto desaparece.
Combínalo con otros efectos
Crea el fondo colorido con el Generador de degradados CSS, ajusta las sombras con el Generador de box-shadow CSS y da forma a las esquinas con el Generador de border-radius. El código se genera en tu navegador.
También te pueden servir estas herramientas gratis: Formateador JSON, Generador de contraseñas y Probador de regex.
Preguntas frecuentes
¿Cómo hago un efecto cristal en CSS?
Combina un fondo semitransparente con backdrop-filter: blur(), por ejemplo background: rgba(255,255,255,.2); backdrop-filter: blur(12px).
¿Por qué no funciona mi backdrop-filter?
El elemento necesita un fondo semitransparente y algo colorido detrás. Safari además necesita -webkit-backdrop-filter.
¿El glassmorphism funciona en todos los navegadores?
Sí, todos los navegadores actuales admiten backdrop-filter. Los antiguos muestran el fondo transparente sin desenfoque.
¿El glassmorphism es accesible?
Puede serlo si el texto mantiene suficiente contraste. Usa más desenfoque o tinte y comprueba el contraste.
¿backdrop-filter ralentiza la página?
Unos pocos elementos no. Muchas capas grandes o animadas pueden afectar a dispositivos antiguos.
Última actualización: