Los paneles de vidrio esmerilado están en todas partes en el diseño de la interfaz: la barra lateral translúcida en un sistema operativo de escritorio, el encabezado borroso que permite que se muestre una foto, la tarjeta que flota sobre un gradiente en una página de destino. La apariencia es simple de describir y extrañamente fácil de equivocar en CSS. Un panel termina plano y gris, o el desenfoque no hace nada, o el texto blanco que contiene es ilegible sobre la mitad del fondo.
Esta guía explica el CSS que hace que el efecto funcione, por qué cada una de las cinco propiedades está ahí, cómo mantener el texto legible cuando el fondo sigue cambiando, cuánto cuesta en el rendimiento de renderizado y cómo retroceder con gracia. Los ejemplos trabajados utilizan el resultado del Generador CSS de morfismo de vidrio Toolz, que crea el código a partir de controles deslizantes y una vista previa en vivo.
TL;Dr: Glassmorphism es un estilo de interfaz de usuario en el que un panel parece vidrio esmerilado: un fondo semitransparente plus
backdrop-filter: blur()entonces, el contenido detrás se muestra suavemente, generalmente terminado con un borde translúcido de 1 px y una sombra suave. Necesita dos cosas para ser visible: un relleno que sea parcialmente transparente y algo colorido detrás del panel. El contraste del texto cambia con lo que pasa debajo, así que pruébalo con las partes más brillantes y oscuras del fondo real. El Generador de morfismo de vidrio CSS escribe el bloque completo, incluido el-webkit-prefijo, lado del cliente, gratis, sin registro.
¿Qué es el vidriomorfismo en CSS?
Glassmorphism es un estilo visual que imita el vidrio esmerilado. Un elemento obtiene un color de fondo con baja opacidad y un filtro de fondo que difumina los píxeles detrás de él, de modo que las formas y colores debajo aparecen suavizados en la superficie. Un borde delgado y claro sugiere el borde del vidrio y una suave sombra levanta el panel de la página.
La propiedad clave es backdrop-filter, definido en el W3C Módulo de Efectos de Filtro Nivel 2. Toma las mismas funciones de filtro que filter (blur(), saturate(), brightness() y el resto) pero los aplica al área detrás del elemento más que al elemento mismo. Esa diferencia es la que hace posible el efecto.
Aquí está el bloque completo que produce el generador para su preajuste Frosted:
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
Seis líneas, y cada una tiene un trabajo.
filtro vs filtro de fondo: ¿cuál es la diferencia?
filter cambia la forma en que se dibuja el elemento en sí, incluido su texto y sus hijos. backdrop-filter cambia lo que se muestra a través del elemento desde atrás y deja nítido el contenido propio de element'.
| Propiedad | Afecta lo que afecta | Resultado del ejemplo borroso | Uso Típico |
|---|---|---|---|
filter: blur(10px) |
El elemento y todos sus hijos | La tarjeta y su texto están borrosos | Efectos de imagen, estados deshabilitados, marcadores de posición de carga |
backdrop-filter: blur(10px) |
Lo que sea que esté pintado detrás del elemento | La carta se mantiene nítida, el fondo que se ve a través de ella está borroso | Paneles de vidrio esmerilado, cabezales borrosos, superposiciones modales |
Si difuminas una tarjeta con filter y me pregunto por qué el título es ilegible, utilizó la propiedad incorrecta. El Generador de filtros CSS cubre el filter lado de la pareja.
¿cómo funciona cada línea del CSS de vidrio?
El fondo es el tinte y su canal alfa es el número más importante del bloque. rgba(255, 255, 255, 0.2) es blanco con un 20% de opacidad. En un alfa de 1, el panel es sólido y no se ve nada, por lo que el fondo se vuelve borroso es invisible. En un alfa de 0 no hay superficie alguna. La mayoría de los vidrios utilizables se sitúan entre 0,1 y 0,4.
En el generador, este es el control deslizante Transparencia y la denominación necesita una nota: el control deslizante establece la opacidad del relleno, por lo que un valor de Transparencia más alto hace que el panel sea más sólido. Transparencia 20% escribe un alfa de 0,2 y 40% escribe 0,4.
El filtro de fondo hace el glaseado. blur(10px) establece el radio del desenfoque aplicado a lo que se encuentra detrás. saturate(120%) aumenta el color de ese fondo borroso en un 20%, lo que contrarresta el aspecto gris descolorido que tiende a producir el desenfoque más un tinte blanco. El generador 's El control deslizante Blur funciona de 0 a 40px y la saturación de 100% a 200%.
La copia con prefijo existe porque las versiones anteriores de Safari solo lo entienden -webkit-backdrop-filter. Escribir ambas líneas con valores idénticos no cuesta nada y cubre esas versiones.
El radio fronterizo rodea las esquinas, de 0 a 50px en el generador. El desenfoque se recorta a la forma redondeada.
La frontera es una línea blanca de 1px con un 18% de opacidad. Llama la atención como un resaltado en el borde del vidrio y importa más en fondos más oscuros, donde el límite del panel se disolvería de otro modo. La casilla de verificación Generador 's Border lo enciende o apaga; el color y el ancho son fijos.
La sombra 0 8px 32px rgba(0, 0, 0, 0.12) es una sombra amplia y tenue que separa el panel de la página. Si quieres sintonizarlo, el guía de sombras de caja explica el desplazamiento, el desenfoque y la dispersión en profundidad.
¿qué producen los ajustes preestablecidos del generador?
Los ajustes preestablecidos son puntos de partida en lugar de diseños terminados. Los cinco utilizan un radio de 16px y todos, excepto Sutil, incluyen el borde.
| Preestablecido | conocimientos | Filtro de fondo | Frontera | Mejor terminado |
|---|---|---|---|---|
| Escarchado | rgba(255, 255, 255, 0.2) |
blur(10px) saturate(120%) |
En | Gradientes coloridos y fotografías |
| Luz | rgba(255, 255, 255, 0.35) |
blur(6px) saturate(130%) |
En | Imágenes ocupadas donde el texto necesita más soporte |
| Oscuro | rgba(15, 23, 42, 0.25) |
blur(12px) saturate(120%) |
En | Fotos claras, texto blanco |
| Vibrante | rgba(139, 92, 246, 0.15) |
blur(16px) saturate(180%) |
En | Secciones de héroes oscuros o saturados |
| Sutil | rgba(255, 255, 255, 0.12) |
blur(4px) saturate(120%) |
Apagado | Pequeñas fichas e insignias |
El generador se carga con Frosted seleccionado. Haga clic en un ajuste preestablecido, ajuste los controles deslizantes y el color de tinte, y el bloque de código se actualiza a medida que arrastra.
¿Por qué mi filtro de fondo no funciona?
Cuando el desenfoque parece no hacer nada, uno de ellos casi siempre es la causa.
- El fondo es opaco. Un sólido
background: #fffo un alfa de 1 oculta completamente el fondo. Baja el alfa. - No hay nada detrás que pueda difuminarse. Sobre una página plana de un solo color, un color plano borroso parece idéntico al color plano. El vidrio necesita un degradado, una foto o formas detrás de él. El generador 's vista previa se asienta deliberadamente sobre un degradado con círculos de colores por esta razón; el Guía de gradiente CSS es una buena fuente de antecedentes que muestran bien el efecto.
- Falta el prefijo. Las versiones anteriores de Safari ignoran la propiedad sin prefijo.
- Un antepasado limita lo que el filtro puede ver. En la especificación actual de efectos de filtro, algunas propiedades de un ancestro, como la suya propia
filter, unopacityinferior a 1 u otrobackdrop-filter, inicie una nueva raíz de fondo y el desenfoque solo muestreará el contenido dentro de esa raíz. Si el vaso se coloca dentro de un envoltorio con uno de estos, mueva el efecto o la propiedad. - El panel no tiene tamaño o es totalmente transparente de otra forma. Un elemento de altura cero o
opacity: 0en el panel oculta el efecto junto con el panel.
¿Cómo se puede mantener el texto legible en un panel de vidrio?
El vidrio legible requiere más trabajo que cualquier otra parte del estilo, porque el color del texto es fijo mientras que el fondo debajo del panel no lo es. El Mínimo de contraste WCAG 2.2 pide una proporción de al menos 4,5:1 para texto normal y 3:1 para texto grande. En un panel translúcido esa proporción depende de lo que hay detrás de cada parte del panel en ese momento.
Un ejemplo trabajado hace que esto sea concreto. La relación de contraste se calcula a partir de la luminancia relativa de los dos colores, (L1 + 0,05) / (L2 + 0,05). Un relleno de vidrio se compone sobre el fondo: cada canal se convierte en alfa multiplicado por el relleno más (1 menos alfa) multiplicado por el fondo. Blur promedia los píxeles vecinos pero deja una región 's color promedio aproximadamente donde estaba, por lo que en un área grande de un color el compuesto es una estimación justa.
| Rellenar | Color de fondo | Color compuesto | Contraste con el texto blanco |
|---|---|---|---|
| Esmerilado, blanco a 0,2 | Azul #60A5FA |
sobre rgb(128, 183, 251) |
aproximadamente 2.1:1 |
| Esmerilado, blanco a 0,2 | Amarillo #FBBF24 |
sobre rgb(252, 204, 80) |
aproximadamente 1,5:1 |
Oscuro, rgba(15, 23, 42, 0.25) |
Azul #60A5FA |
sobre rgb(76, 130, 198) |
aproximadamente 4.0:1 |
Tome la primera fila. El rojo es 0,2 x 255 + 0,8 x 96 = 127,8, el verde es 0,2 x 255 + 0,8 x 165 = 183, el azul es 0,2 x 255 + 0,8 x 250 = 251. Ese color's la luminancia relativa funciona cerca de 0,454, y el blanco's es 1, por lo que la proporción es 1,05 / 0,504, aproximadamente 2,1:1. El mismo panel sobre la parte amarilla del fondo cae a aproximadamente 1,5:1. Ninguno pasa por el cuerpo del texto, y el ajuste preestablecido oscuro sobre el azul alcanza aproximadamente 4,0:1: suficiente para texto grande, todavía por debajo de 4,5:1 para texto pequeño.
Las soluciones prácticas, en orden de efectividad:
- Eleva el relleno alfa. Mover Transparencia del 20% al 40% oculta más fondo y reduce el rango a través del cual oscila el contraste.
- Oscurece el tinte para obtener texto claro, o aclararlo para texto oscuro. El vidrio oscuro con texto blanco sostiene muchos más fondos que el vidrio blanco con texto blanco.
- Aumenta el desenfoque. Alisa los detalles de alto contraste, por lo que una fina línea blanca detrás de una letra no la atraviesa.
- Agrega una sombra de texto como último recurso para los títulos. El generador de sombras de texto hace uno suave rápidamente.
- Prueba en los extremos. Verifique el contraste entre las regiones más brillantes y oscuras en las que puede sentarse el panel, con el comprobador de contraste de color, no en un lugar conveniente.
El generador 's CSS copiado cubre únicamente la superficie del vidrio. El texto blanco en su vista previa no forma parte de la salida, por lo que está configurado color en tu elemento tú mismo.
¿el filtro de fondo perjudica el rendimiento?
Puede. Un desenfoque de fondo obliga al navegador a leer los píxeles detrás del elemento y ejecutar un desenfoque sobre ellos cada vez que cambia esa área. En una tarjeta estática que es barata. En un área grande, durante el desplazamiento o cuando el contenido se anima detrás del panel, es uno de los efectos más costosos de componer, y los teléfonos de menor potencia lo muestran primero como fotogramas caídos.
Pautas que lo mantienen bajo control:
- Mantenga los paneles de vidrio de tamaño modesto. Una superposición esmerilada de ventana gráfica completa cuesta mucho más que una tarjeta.
- Prefiera radios borrosos más pequeños. El costo crece con el radio y, más allá de aproximadamente 20 px, la diferencia visual es pequeña.
- Evite animar el valor borroso en sí. Animar
opacityinvestigaciones operacionalestransformdel panel en su lugar. - Tenga cuidado con los encabezados adhesivos sobre el contenido de desplazamiento largo, que se vuelven a desenfocar en cada cuadro de desplazamiento. Pruebe en un teléfono real de gama media.
¿cómo se agrega una alternativa para navegadores o usuarios que la necesitan?
Las versiones actuales de Chrome, Edge, Firefox y Safari son compatibles backdrop-filter. Los navegadores muy antiguos lo ignoran y muestran el relleno semitransparente sin desenfoque, que en alfa bajo puede dejar texto en un fondo ocupado. Dos pequeñas adiciones hacen que el efecto se degrade bien. Puedes consultar la tabla de soporte actual en MDN's página de filtro de fondo.
.glass {
/* Fallback: a more solid fill for browsers without backdrop-filter */
background: rgba(255, 255, 255, 0.7);
border-radius: 16px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
}
@media (prefers-reduced-transparency: reduce) {
.glass {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
los @supports el bloque solo aplica la versión translúcida donde existe el desenfoque. El prefers-reduced-transparency característica multimedia, definida en Consultas de medios Nivel 5, permite a los usuarios que han pedido menos transparencia a su sistema operativo obtener un panel sólido. La compatibilidad del navegador con esa función multimedia sigue siendo parcial, así que trátela como una mejora cuando esté disponible en lugar de la única protección.
Vidriamorfismo vs neumorfismo vs diseño plano
El glassmorphism es uno de varios estilos de superficie y cada uno tiene un costo diferente.
| Estilo | Cómo se hace la superficie | Css principal | fuerza | Riesgo principal |
|---|---|---|---|---|
| Vidriomorfismo | Relleno translúcido más desenfoque de fondo | background cu alfa, backdrop-filter |
Profundidad y contexto del fondo | El contraste varía, el desenfoque cuesta el rendimiento |
| Neumorfismo | Mismo color que la página, en relieve o presionado por sombras emparejadas | Dos box-shadow capas |
Controles suaves y táctiles | Muy bajo contraste entre control y página |
| Plano | Rellenos sólidos, sin profundidad | background |
Rápido y predecible | Puede sentirse simple |
| Elevación estilo material | Relleno sólido con niveles de profundidad de sombra | box-shadow |
Jerarquía clara | Menos atmosférico |
Si la apariencia suave y extruida se acerca más a lo que desea, el generador de neumorfismo construye las sombras emparejadas. Muchas interfaces mezclan estilos: vidrio para una barra de navegación flotante sobre una imagen de héroe, tarjetas planas para contenido denso debajo.
Cómo construir una tarjeta de vidrio, de principio a fin
- Abre el generador CSS de vidrio esmerilado y elija el ajuste preestablecido más cercano a su fondo: Oscuro para fotos claras, Escarchado o Claro para degradados coloridos.
- Establezca Blur lo suficientemente alto como para que los detalles del fondo no compitan con el texto, generalmente de 8 a 16 px.
- Establecer transparencia. Comience en 20% y levántelo hasta que su texto pase el contraste sobre la parte más dura del fondo.
- Elija un tinte con el selector de color. Un tinte extraído del fondo y la propia paleta #39 parece más natural que el blanco puro.
- Ajuste el radio para que coincida con el resto de sus componentes y mantenga Border activado para fondos oscuros.
- Haga clic en Copiar CSS y pegue el bloque en la clase de su tarjeta. Agregar
colory acolchándote. - Envuelva el bloque en el
@supportsvuelva a aparecer arriba si admite navegadores más antiguos.
Todo lo que hay en el generador se ejecuta en su navegador, por lo que no se carga nada y sigue funcionando sin conexión después de que se carga la página. Para herramientas de efectos y superficies relacionadas, el Centro de herramientas CSS enumera gradientes, sombras, filtros y transiciones en un solo lugar.
