Glassmorphism CSS: Efecto de Vidrio Esmerilado Paso a Paso

El CSS de vidrio esmerilado (Glassmorphism) es el aspecto de vidrio esmerilado que ves en los paneles de macOS, los widgets de iOS y los paneles modernos: una tarjeta translúcida que desenfoca todo lo que hay detrás. Todo el efecto se reduce a dos declaraciones, backdrop-filter: blur() y un background semitransparente, superpuestos sobre un fondo colorido. Si lo haces bien y agregas un borde fino de resalte, el vidrio se ve real.

Aquí está la parte que la mayoría de los generadores omiten. La tarjeta en sí es el 20% fácil. La razón por la que tu versión se ve muerta mientras que las tomas de Dribbble se ven vivas es casi siempre el fondo detrás del vidrio, no el vidrio. Esta guía construye el efecto desde cero, corrige las tres cosas que lo hacen ver barato y cubre la compatibilidad del navegador que necesitas saber antes de publicar.

Qué es realmente el CSS Glassmorphism#

El glassmorphism es una superficie de vidrio esmerilado creada al difuminar el contenido detrás de un elemento, no el elemento en sí. Se apila un relleno de baja opacidad sobre backdrop-filter: blur(), se añade un borde de luz tenue y se deja que un fondo vibrante se vea a través. La combinación de desenfoque y transparencia es lo que vende la ilusión de "vidrio real".

Esa distinción importa. filter: blur() difumina el elemento al que se aplica. backdrop-filter: blur() difumina todo lo pintado detrás y mantiene nítido el contenido del elemento. El glassmorphism necesita el segundo, por lo que un solo nombre de propiedad incorrecto es la razón más común por la que el efecto "no hace nada".

El aspecto tiene tres ingredientes obligatorios y un adorno opcional:

• Un fondo semitransparente (generalmente blanco o negro con una opacidad del 10 al 25%).
• Un desenfoque de fondo para que el fondo se suavice como un esmerilado.
• Un fondo vibrante y multicolor detrás de la tarjeta para que haya algo interesante que difuminar.
• Un borde resaltado de 1px en relieve que simula la forma en que la luz incide en el borde del vidrio.

El error más grande es probar el glassmorphism sobre una página plana o blanca. No hay nada que difuminar, por lo que la tarjeta parece un gris de baja opacidad simple. Siempre constrúyelo sobre un degradado o una foto.

Cómo crear el efecto Glassmorphism con CSS#

Esta es la receta completa. Sigue los pasos en orden, porque cada uno corrige una forma específica en que el efecto puede verse plano.

Paso 1: Coloca un degradado vibrante detrás de la tarjeta#

El fondo hace la mayor parte del trabajo visual. Una tarjeta esmerilada sobre una pared gris es escarcha gris. Una tarjeta esmerilada sobre un degradado de magenta a cian es el aspecto que la gente realmente quiere. Empieza por el fondo, no por la tarjeta.

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #7b2ff7 0%, #f107a3 50%, #00c6ff 100%);
}

Dos o tres tonos saturados y contrastados difuminados juntos producen la suave floración de color que se lee como vidrio. Si no estás seguro de qué colores se mantienen una vez difuminados, construye el fondo con un generador de degradados CSS gratuito y previsualiza algunas combinaciones antes de decidirte. Los degradados turbios o de bajo contraste se convierten en lodo bajo el desenfoque, así que pruébalo.

Paso 2: Añade la capa semitransparente#

Ahora la tarjeta. Dale un relleno que deje ver el fondo. El blanco con baja opacidad funciona en la mayoría de los fondos; el negro con baja opacidad es adecuado para escenas oscuras o de neón.

.glass {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 2rem;
}

Usa rgba() (o la sintaxis moderna rgb(255 255 255 / 12%)) en lugar de la propiedad opacity. Establecer opacity desvanece todo el elemento, incluido su texto e hijos. Solo quieres el fondo translúcido, nunca el contenido que está sobre el vidrio.

Paso 3: Aplica el desenfoque de fondo#

Esta es la línea que convierte una caja translúcida en vidrio esmerilado.

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 2rem;
}

Un radio de desenfoque de 8px a 16px da en el punto óptimo. Por debajo de 6px la escarcha apenas se ve; por encima de 20px el fondo se disuelve en papilla y pierdes la sensación de que hay contenido real detrás del vidrio. Siempre combina la propiedad estándar con -webkit-backdrop-filter, porque Safari todavía necesita el prefijo.

Paso 4: Añade el borde iluminado que lo vende#

Aquí está el detalle que casi todos los generadores omiten, y es la diferencia entre "obviamente CSS" y "parece vidrio real". El vidrio real capta la luz en sus bordes superior e izquierdo. Lo simulas con un borde tenue, claro y semitransparente.

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 2rem;
}

El borde claro de 1px se lee como el borde brillante de un panel de vidrio. Para un borde aún más convincente, superpón un resalte interior usando box-shadow. La línea blanca interior imita la luz que se refracta a lo largo del borde interno:

.glass {
  /* ...propiedades anteriores... */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

Ese resalte inset 0 1px 0 es el ingrediente secreto. La sombra exterior eleva la tarjeta de la página; la línea interior le da al borde superior ese brillo vítreo nítido.

Paso 5: Ajusta la profundidad y el contraste#

Con los cuatro ingredientes en su lugar, ajusta al gusto:

• Opacidad: controla la escarcha. Más baja (8 a 12%) es más transparente; más alta (18 a 25%) es más lechosa y legible para el texto.
• Radio de desenfoque: controla cuán suave se vuelve el fondo. Más desenfoque significa más privacidad y menos detalle visible detrás.
• Sombra exterior: controla cuánto flota la tarjeta sobre la página. Suavízala y extiéndela para una sensación más elevada.
• Opacidad del borde: controla cuán pronunciado se ve el borde del vidrio. Un borde más brillante equivale a un vidrio más brillante.

Un ejemplo completo de copiar y pegar#

Uniendo todos los pasos, aquí tienes un fragmento funcional completo que puedes insertar en cualquier proyecto.

<div class="glass">
  <h2>Tarjeta de vidrio esmerilado</h2>
  <p>Desenfoque de fondo sobre un degradado vibrante.</p>
</div>

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #7b2ff7 0%, #f107a3 50%, #00c6ff 100%);
}

.glass {
  max-width: 360px;
  padding: 2rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
}

Cambia el degradado por tu propia paleta, reduce la opacidad si el texto es difícil de leer y tendrás una tarjeta de vidrio lista para producción. Si quieres reutilizar los mismos tonos en botones, insignias y el fondo de la página, fíjalos con un generador de paletas de colores para diseño de marca para que toda la interfaz se mantenga coherente.

Las propiedades que controlan el aspecto#

Úsalo como referencia rápida al ajustar una superficie de vidrio.

Propiedad	Qué hace	Rango típico
backdrop-filter: blur()	Escarcha el contenido detrás de la tarjeta	8px a 16px
background: rgba()	Define el relleno translúcido	0.08 a 0.25 de alfa
border: 1px solid rgba()	Borde claro que simula un borde de vidrio	0.2 a 0.3 de alfa
box-shadow (exterior)	Eleva la tarjeta de la página	suave, grande, alfa bajo
box-shadow (interior)	Resalte interior nítido en el borde superior	inset 0 1px 0 blanco
border-radius	Redondea las esquinas (el vidrio rara vez es afilado)	12px a 24px

También puedes combinar valores de backdrop-filter. Agregar un toque de saturación hace que los colores del fondo resalten a través de la escarcha: backdrop-filter: blur(12px) saturate(160%). Ese aumento de saturación es un truco favorito para que el vidrio se sienta más rico sin cambiar el relleno de la tarjeta.

Compatibilidad del Navegador y los Detalles que Nadie Menciona#

backdrop-filter tiene un soporte sólido en los navegadores modernos (Chrome, Edge, Safari y Firefox), pero existen limitaciones reales que te afectarán en producción.

• Safari necesita el prefijo. Siempre incluye -webkit-backdrop-filter junto con la propiedad estándar. Sin él, Safari renderiza un cuadro translúcido plano sin desenfoque.
• Firefox lo tuvo restringido. backdrop-filter se habilitó en Firefox 103. Las versiones anteriores lo tenían detrás de una bandera, por lo que las versiones muy antiguas de Firefox muestran el relleno pero sin el efecto de vidrio. Para la mayoría del público esto ya no es un problema, pero si tus análisis muestran tráfico de Firefox antiguo, planifica un fallback.
• Consume mucha GPU. Cada elemento con backdrop-filter obliga al navegador a volver a muestrear y desenfocar lo que está detrás. Una página con docenas de tarjetas con desenfoque, o desenfoque en una lista desplazable, puede perder fotogramas en dispositivos más débiles. Úsalo en unas pocas superficies principales, no en cada elemento de la lista.

El patrón de fallback limpio es una consulta de características. Dale a todos una tarjeta opaca legible y luego mejora al efecto de vidrio solo donde el navegador lo soporte:

.glass {
  background: rgba(255, 255, 255, 0.7); /* fallback legible */
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

Advertencia de accesibilidad: el texto blanco con baja opacidad sobre un degradado ocupado puede fallar en las comprobaciones de contraste. El vidrio se ve genial en los mockups, pero falla con usuarios reales. Aumenta la opacidad del relleno, oscurece el texto o agrega una capa sólida sutil detrás del texto para que sea legible sobre cualquier fondo.

Cuándo usar el vidrio esmerilado (y cuándo evitarlo)#

El vidrio esmerilado destaca en superposiciones sobre contenido rico: barras de navegación sobre una imagen principal, modales sobre un panel de control, tarjetas de widgets sobre un degradado. El desenfoque crea profundidad y mantiene la capa inferior ligeramente visible, que es exactamente la señal espacial que pretende transmitir.

Es la elección incorrecta cuando no hay nada significativo detrás de la tarjeta, cuando la legibilidad del texto es crítica (lectura larga, tablas de datos) o cuando se necesita repetirlo cientos de veces en una página. En esos casos, una tarjeta sólida con una sombra suave funciona mejor y se lee más claramente.

Trata el vidrio esmerilado como un condimento, no como el plato principal. Una o dos superficies de vidrio sobre un fondo degradado fuerte se ven premium. Veinte de ellas apiladas en una página plana parecen un error.

Conclusión#

El vidrio esmerilado en CSS es realmente sencillo una vez que conoces la receta completa: un fondo degradado vibrante, un relleno semitransparente, backdrop-filter: blur() con el prefijo WebKit, y un borde claro de 1px más un resalte interior para simular el borde del vidrio. La tarjeta es la parte fácil. El fondo y el borde son lo que la hace ver real en lugar de muerta.

Empieza por dominar el degradado, porque todo lo demás se superpone sobre él. Crea y previsualiza tu fondo en el generador de degradados CSS gratuito, lee la guía completa sobre fondos degradados modernos en CSS para ideas de paletas, y luego coloca la tarjeta de vidrio encima. Cuando estés listo para exportar el diseño como imagen plana, un convertidor gratuito de SVG a PNG convierte tus vectores exportados en los recursos rasterizados que necesitas.

Preguntas Frecuentes#

¿Por qué mi CSS de glassmorphism se ve plano o gris? Casi siempre porque no hay nada vívido detrás de la tarjeta. El efecto esmerilado desenfoca el fondo, por lo que sobre una página blanca o gris plana el resultado es solo un gris de baja opacidad y sin brillo. Coloca un gradiente saturado y multicolor o una foto detrás del vidrio y el efecto cobrará vida al instante.

¿Cuál es la diferencia entre filter blur y backdrop-filter blur? filter: blur() desenfoca el elemento al que se aplica, incluyendo su propio texto e hijos. backdrop-filter: blur() desenfoca solo el contenido pintado detrás del elemento mientras mantiene el contenido del elemento nítido. El glassmorphism necesita backdrop-filter, por lo que usar el incorrecto hace que el efecto parezca no funcionar.

¿Funciona backdrop-filter en todos los navegadores? Funciona en Chrome, Edge, Safari y Firefox 103 y posteriores modernos. Safari requiere el prefijo -webkit-backdrop-filter además de la propiedad estándar, y las versiones muy antiguas de Firefox lo tenían detrás de una bandera. Usa una consulta de características @supports con un relleno opaco de respaldo para cubrir navegadores que carecen de soporte.

¿Por qué debería evitar la propiedad opacity para tarjetas de vidrio? La propiedad opacity desvanece todo el elemento, incluyendo cualquier texto o botón sobre el vidrio, lo que hace que el contenido sea ilegible. Usa un valor de fondo rgba() o rgb()/... para que solo el relleno sea translúcido mientras el contenido permanece completamente opaco.

¿Es malo el glassmorphism para el rendimiento? Puede serlo. Cada elemento con backdrop-filter obliga al navegador a volver a muestrear y desenfocar los píxeles detrás de él, lo que consume mucha GPU. Unas pocas superficies de vidrio están bien, pero desenfocar docenas de tarjetas o aplicarlo dentro de una lista con desplazamiento puede causar caídas de fotogramas en dispositivos de gama baja, así que úsalo con moderación en elementos principales.

¿Cómo mantengo accesible el glassmorphism? Vigila el contraste del texto. El texto claro de baja opacidad sobre un gradiente ocupado a menudo falla las comprobaciones de contraste WCAG. Aumenta la opacidad del relleno, oscurece o pone en negrita el texto, o agrega una capa sólida sutil detrás del bloque de texto para que se mantenga legible independientemente del color que muestre el fondo en ese punto.