¿Por qué no se ve nada en mi proyecto?

El glassmorphism necesita algo detrás para desenfocar. En una página blanca, un fondo blanco al 95 % con backdrop-blur se ve idéntico a un fondo blanco al 95 % sin blur - no hay nada que desenfocar. Pon una imagen colorida, degradado o patrón cargado detrás de la tarjeta; el efecto aparece al instante.

¿En qué se diferencia de un fondo semitransparente normal?

`background: rgba(255,255,255,0.5)` deja que el fondo se vea tal cual - legible si el fondo es liso, ilegible si está cargado. `backdrop-filter: blur(20px)` más un fondo translúcido desenfoca el fondo *antes* de mostrarse, así el texto encima sigue legible por más caótica que sea la imagen. El blur es lo que hace que funcione el glassmorphism; la transparencia sola no basta.

¿Backdrop-filter está soportado en todas partes?

Chrome, Edge, Safari modernos (con prefijo `-webkit-` para versiones más antiguas) y Firefox 103+. El Firefox anterior cae a sin blur - el fondo igual se ve, sólo que nítido, que suele funcionar como experiencia degradada. Para UI crítica, añade un fondo más opaco como fallback (`background: rgba(255,255,255,0.9)`) para que el diseño aguante sin el blur.

¿Por qué es malo para el rendimiento?

`backdrop-filter: blur()` obliga al navegador a asignar un buffer off-screen del tamaño del elemento, desenfocar los píxeles detrás y luego componer. En scroll, esto pasa en cada frame para cada elemento glass visible. Una o dos tarjetas glass por página están bien; una lista de 20 ítems en glass a la vez bajará el frame rate notablemente en portátiles modestos. Profila antes de enviar una interfaz cargada de glass.

Generador de glassmorphism

Vidrio esmerilado en CSS con vista previa en vivo - ajusta color de fondo, backdrop blur, borde y sombra sobre un fondo cargado.

Fondo

Color de fondo

Opacidad fondo20%

Color de borde

Opacidad borde35%

Backdrop blur16px

Border radius16px

Desenfoque sombra32px

CSS

background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);

Vista previa

Vidrio esmerilado

Paneles translúcidos con backdrop blur fuerte y un borde sutil.

Glassmorphism = fondo translúcido + backdrop blur fuerte + borde fino + sombra suave. La vista previa pone tu tarjeta sobre un fondo cargado para que el blur se vea (el efecto es invisible sobre un fondo plano - necesita algo detrás). Los cuatro ingredientes tienen sliders; la vista previa se actualiza en vivo y el bloque CSS está listo para copiar.

Cómo usarla

Elige un fondo
Alterna entre imagen, degradado y patrón cargado en la vista previa - el efecto cambia de sentido con cada uno.
Ajusta transparencia + blur
El alpha del fondo controla cuánto se transparenta; el backdrop blur cuánto se difumina. Los dos trabajan juntos.
Añade borde + sombra
Un borde translúcido blanquecino de 1 px le da al vidrio un canto físico. Una sombra suave lo eleva sobre la superficie.
Copia el CSS
Las cuatro declaraciones (background, backdrop-filter, border, box-shadow) llegan en un solo bloque listo para pegar.

¿Qué es?

El glassmorphism es la estética UI de vidrio esmerilado - paneles translúcidos respaldados por un fuerte desenfoque de fondo. La receta CSS es corta: `background-color` con alpha < 1, `backdrop-filter: blur(...)`, un borde fino (a menudo `rgba(255,255,255,0.18)`), un `border-radius` generoso y un `box-shadow` opcional suave para la profundidad. La ilusión solo funciona cuando hay algo colorido detrás del panel sobre lo que el blur pueda actuar - sobre fondos planos el efecto colapsa a un mero rectángulo translúcido.

Cuándo usarla

Superficies UI flotantes sobre imágenes o vídeos hero, barras de navegación sobre fondos de foto, paneles modales sobre un fondo difuminado de la página debajo, tarjetas en páginas marketing donde el fondo es un degradado vibrante o foto, y overlays tipo tooltip donde se quiere sugerir contenido por encima sin reemplazar la página.

Errores comunes

Diseñar la tarjeta glass contra un fondo plano en Figma y luego sorprenderse de que en producción no se vea nada - prueba contra el verdadero fondo colorido. Apilar glass sobre glass (la calidad del blur se degrada y el frame rate cae). Olvidar el borde - sin él, el glass parece un manchón; el highlight fino es lo que se lee como «canto de vidrio físico». Saltarse el box-shadow - la profundidad es lo que separa el vidrio del celofán.

Preguntas frecuentes

¿Qué es el glassmorphism?: Una tendencia de diseño popularizada por macOS Big Sur y Windows 11 donde las superficies UI parecen vidrio esmerilado: fondo semitransparente, contenido detrás difuminado, borde sutil para captar la luz y sombra suave para la profundidad. Distinto del neumorphism (que finge 3D con dos sombras opuestas) y del skeuomorphism (que imita materiales reales con detalle).
¿Por qué no se ve nada en mi proyecto?: El glassmorphism necesita algo detrás para desenfocar. En una página blanca, un fondo blanco al 95 % con backdrop-blur se ve idéntico a un fondo blanco al 95 % sin blur - no hay nada que desenfocar. Pon una imagen colorida, degradado o patrón cargado detrás de la tarjeta; el efecto aparece al instante.
¿En qué se diferencia de un fondo semitransparente normal?: `background: rgba(255,255,255,0.5)` deja que el fondo se vea tal cual - legible si el fondo es liso, ilegible si está cargado. `backdrop-filter: blur(20px)` más un fondo translúcido desenfoca el fondo *antes* de mostrarse, así el texto encima sigue legible por más caótica que sea la imagen. El blur es lo que hace que funcione el glassmorphism; la transparencia sola no basta.
¿Backdrop-filter está soportado en todas partes?: Chrome, Edge, Safari modernos (con prefijo `-webkit-` para versiones más antiguas) y Firefox 103+. El Firefox anterior cae a sin blur - el fondo igual se ve, sólo que nítido, que suele funcionar como experiencia degradada. Para UI crítica, añade un fondo más opaco como fallback (`background: rgba(255,255,255,0.9)`) para que el diseño aguante sin el blur.
¿Por qué es malo para el rendimiento?: `backdrop-filter: blur()` obliga al navegador a asignar un buffer off-screen del tamaño del elemento, desenfocar los píxeles detrás y luego componer. En scroll, esto pasa en cada frame para cada elemento glass visible. Una o dos tarjetas glass por página están bien; una lista de 20 ítems en glass a la vez bajará el frame rate notablemente en portátiles modestos. Profila antes de enviar una interfaz cargada de glass.