Superficies: vidrio y neón

El vidrio necesita algo detrás

El error más común con el glassmorphism es aplicarlo sobre un fondo plano y preguntarse por qué no se ve. backdrop-filter desenfoca lo que hay detrás del panel: si detrás solo hay un color liso, no hay nada que desenfocar y el efecto desaparece. Por eso las demos de esta página viven sobre un fondo con manchas de color — y por eso tu panel de vidrio debe ir sobre una foto, un degradado o una composición con contraste.

Cómo usar estas superficies

1. Copia el CSS de la superficie. Las de vidrio incluyen el prefijo -webkit- que Safari todavía agradece.
2. Colócala sobre un fondo con información visual: degradado, imagen o la malla aurora de esta misma página.
3. Ajusta la opacidad del fondo del panel antes que el desenfoque: casi siempre el efecto mejora bajando la opacidad, no subiendo el blur.

La física del neón en tres capas

Un letrero de neón real no emite un halo, emite varios: la luz pegada al tubo, un resplandor medio y una niebla amplia que tiñe la pared. El neón CSS que convence imita exactamente eso: tres box-shadow (o text-shadow) de la misma tonalidad a radios crecientes y opacidad decreciente. Con una sola capa parece un subrayado de color; con tres, luz.

Dónde encajan

• Hero sobre foto: el panel de vidrio mantiene legible el titular sin tapar la imagen.
• Portadas de evento o streaming: el neón marca lo que está vivo — un «EN DIRECTO», una oferta, una cifra.
• Fondos de sección: la malla aurora y la rejilla técnica sostienen una sección entera sin una sola imagen que cargar.
• Dark mode con carácter: el ruido fino quita ese aspecto de negro plano de pantalla apagada.

Las demás categorías

La familia completa, cada una con sus piezas y su código: formas y recortes, bento grid, botones y controles, tarjetas, formularios, datos y métricas y microinteracciones. Y si buscas generadores en vez de piezas hechas, están en Código web.

Preguntas frecuentes

¿Por qué mi efecto de vidrio no se ve?

Casi seguro porque el fondo detrás del panel es plano. backdrop-filter desenfoca lo que hay detrás; necesita color, formas o una imagen para demostrarlo. Pon el panel sobre un degradado y aparecerá.

¿backdrop-filter funciona en todos los navegadores?

En todos los modernos, sí; en Safari conviene acompañarlo del prefijo -webkit-backdrop-filter, que estas recetas ya incluyen. Si un navegador antiguo no lo soporta, el panel se ve como un panel semitransparente normal: degrada con dignidad.

¿El desenfoque afecta al rendimiento?

Es de los efectos más caros de pintar, sobre todo en pantallas grandes y en móviles modestos. La regla práctica: úsalo en piezas concretas (una tarjeta, una barra), no en superficies enormes, y evita animar el valor del blur.

¿Cómo cambio el color del neón?

Cada receta de neón define su color en la variable --luz y en las sombras. Cambia la variable y los rgba() de las sombras a tu color y mantén la estructura de capas: pegada, media y amplia.

¿Puedo usar el fondo de ruido sin cargar una imagen?

Sí, ese es el truco de la receta: el grano es un SVG con feTurbulence incrustado como data URI dentro del propio CSS. Cero peticiones de red, cero archivos que gestionar.

¿Vidrio sobre fondo claro también funciona?

Funciona, pero invierte los valores: en claro el panel pide un fondo blanco translúcido más opaco (0.4–0.6) y una sombra más suave. El desenfoque es el mismo; lo que cambia es cuánta luz deja pasar.