Este generador de glassmorphism en CSS crea el efecto de vidrio esmerilado con cuatro controles deslizantes y te entrega el CSS. La vista previa aplica los mismos valores a una tarjeta y a una ventana modal, sobre formas flotantes que permiten apreciar el desenfoque.
Lo que puedes configurar:
- Desenfoque de 0px a 20px, el radio pasó a
backdrop-filter: blur() - Transparencia de 0 a 1, el canal alfa del fondo del panel blanco
- Contorno de 0px a 5px, el ancho del borde blanco semitransparente
- Saturación de 100% a 200%, aplicada hasta
saturate()para que los colores detrás del vidrio se vean más fuertes
Tres ajustes preestablecidos le brindan un punto de partida: Subtle (desenfoque de 5px, 0.2 alfa), Negrita (desenfoque de 15px, 0.4 alfa, contorno de 2px) y Frosted (desenfoque de 20px, 0.1 alfa, sin contorno). Shuffle elige valores aleatorios, Reset restaura los valores predeterminados y Copy coloca el CSS en tu portapapeles. Todo se ejecuta en tu navegador.
Cómo utilizar este CSS Generador de morfismo de vidrio
- Haz clic en un ajuste preestablecido o arrastre los cuatro controles deslizantes hasta que la tarjeta y las vistas previas modales se vean bien.
- Esté atento al texto dentro de la tarjeta. Si resulta difícil de leer, reduzca el desenfoque o aumente el valor de transparencia.
- Haz clic en Copiar y pegue el bloque en la regla de tu panel, tarjeta o barra de navegación.
- Asegúrese de que el elemento se asiente sobre un degradado o una imagen. Sobre un color plano, el desenfoque no tiene nada que mostrar.
Con los valores predeterminados, el generador genera esto:
.glass-panel {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}El selector es tuyo para agregarlo. La herramienta copia solo las declaraciones, por lo que se incluyen en cualquier regla existente.
Lo que la herramienta no hace
- El color del panel es siempre blanco. Para vidrios polarizados, cambia los primeros tres números en
rgba(255, 255, 255, …)al color de tu marca. Un convertidor HEX a RGB le proporciona los valores del canal. - El color del borde, el radio de las esquinas y la sombra se fijan en
rgba(255, 255, 255, 0.3),16pxy0 4px 30px rgba(0, 0, 0, 0.1). Sintonízalos después con el generador de border-radius en CSS y el generador de box-shadow en CSS. - Exporta solo CSS, sin SCSS ni Tailwind. Los valores predeterminados se asignan a Tailwind
backdrop-blur-[10px] backdrop-saturate-[1.8] bg-white/30 border border-white/30 rounded-2xl. - No agrega un respaldo. Para navegadores sin backdrop-filter (EN), envuelva un fondo opaco en un bloque @supports (EN), como se muestra en la sección paso a paso a continuación.
¿Qué es un generador de morfismo de vidrio CSS?
Un CSS generador de morfismo de vidrio es una herramienta basada en navegador que convierte las entradas de los controles deslizantes en listas para usar CSS para el efecto de interfaz de vidrio esmerilado.
La apariencia en sí, morfismo de vidrio (EN), toma prestado su nombre del vidrio real: paneles semitransparentes que difuminan todo lo que se encuentra detrás de ellos. Michal Malewicz de Hype4.Academy acuñó el término en un artículo publicado en noviembre de 2020 (EN). Se mantuvo porque le dio a una tendencia visual dispersa un nombre único que se podía buscar.
Lo que un generador te devuelve, una vez que dejas de arrastrar los controles deslizantes:
- Una vista previa en vivo del panel de vidrio sobre un fondo de muestra
- Clases listas para copiar CSS o Tailwind sobre algunas herramientas
- Controles ajustables para desenfoque, transparencia, borde y, a veces, radio de esquina
En lugar de observar los valores de desenfoque y opacidad de una maqueta (EN) estática, arrastra algunos controles deslizantes y copia el código resultante. Sin cálculos manuales en los canales alfa rgba, sin adivinar el radio de desenfoque.
La mayoría de las herramientas, incluida ésta, exportan CSS sin formato. En su lugar, un número menor devuelve Tailwind clases de utilidad o variables SCSS, lo cual es importante una vez que eliges un flujo de trabajo.
¿Qué CSS Propiedades Producen el Efecto Glassmorfismo?
Cuatro propiedades CSS se combinan para crear la apariencia de vidrio: filtro de fondo, un color de fondo translúcido, un borde sutil y un cuadro de sombra.
Suelte cualquiera de los cuatro y el efecto será plano en lugar de vidrioso. Suelte el filtro de fondo específicamente y no habrá ningún desenfoque, solo un cuadro transparente.
backdrop-filter y radio de desenfoque
Propiedad principal: backdrop-filter (EN) difumina el área pintada detrás de un elemento, usando blur() como su función de filtro más común.
- Desenfoque bajo (alrededor de 5 px a 8 px): el fondo permanece parcialmente legible a través del panel
- Desenfoque medio (alrededor de 10 px a 16 px): el valor predeterminado común en la mayoría de los generadores
- Desenfoque alto (20 píxeles y más): el fondo se disuelve en un suave lavado de color
Las versiones anteriores de Safari necesitan la propiedad duplicada como -webkit-backdrop-filter, un prefijo de proveedor que la mayoría de los generadores, incluido este, agregan automáticamente.
Color de fondo y transparencia alfa
Valor alfa: el color de fondo pasa por rgba() o hsla() para que el color del panel permanezca transparente en lugar de sólido.
Convertir un color de marca de hexadecimal a un valor rgba con el canal alfa correcto es la parte complicada. Un convertidor de HEX a RGB guarda las matemáticas manuales.
La mayoría de los generadores establecen por defecto el valor alfa entre 0.1 y 0.3. Empuje más allá de 0.4 y el panel dejará de parecer vidrio y comenzará a verse como una ventana polarizada.
Capas de borde y sombra
Edge de vidrio: un Edge de 1 px en un blanco claro y semitransparente simula el Edge reflectante que verías en el vidrio real.
Box-shadow hace el resto del trabajo. Agrega una sombra suave para que el panel parezca flotar sobre el fondo en lugar de estar a ras de él. Un CSS generador de sombras de caja maneja las matemáticas de desplazamiento y radio de desenfoque si estás creando la sombra por separado.
Omita la sombra y el panel parecerá pegado. Salta el borde y los bordes desaparecerán en lo que sea que se encuentre detrás de ellos.
¿Qué fondo necesita un elemento de vidrio para funcionar?
Un panel de vidrio necesita una capa ocupada detrás, degradado o imagen, porque el desenfoque no tiene nada que difundir sobre un solo color plano.
Generar un degradado suave CSS (EN) detrás del panel es una forma confiable de darle al desenfoque algo con qué trabajar. Los degradados de varias paradas se difuminan en suaves transiciones de color que parecen intencionadas en lugar de turbias.
El propio lanzamiento de Apple de esta apariencia dependía exactamente de este requisito. macOS Big Sur se lanzó el 12 de noviembre de 2020 (EN), combinando barras de menú translúcidas con fondos de pantalla dinámicos que cambian de color. Esos fondos de pantalla le dan al desenfoque una textura en movimiento.
Coloque el mismo panel de vidrio sobre un fondo blanco o de un solo color y el efecto se vuelve plano. No hay nada que el desenfoque pueda difuminar, por lo que el panel parece un rectángulo ligeramente brumoso.
Qué tiende a funcionar y qué no:
- Funciona: fotografías, degradados de múltiples paradas, capturas de pantalla de aplicaciones coloridas.
- Funciona mal: colores de marca sólidos, fondos blancos o casi blancos
¿Qué navegadores son compatibles con backdrop-filter?
El filtro de fondo ahora funciona en todos los principales navegadores, aunque el soporte completo y sin prefijos tardó años en llegar a todos los ámbitos.
Lograr que el mismo aspecto de vidrio se reproduzca de manera idéntica en todas partes solía ser uno de los problemas de compatibilidad entre navegadores (EN) más complicados en CSS. Esa brecha prácticamente se ha cerrado.
Cifras clave, según los datos del Web Platform Baseline tracker (EN) y caniuse (EN):
- Chrome envió un filtro de fondo sin prefijo a partir de Chrome 76 (EN), lanzado en julio de 2019
- Firefox agregó soporte sin prefijos más tarde, en Firefox 103 (EN), lanzado el 26 de julio de 2022.
- Safari eliminó su requisito de prefijo -webkit- en Safari 18 (EN), lanzado el 16 de septiembre de 2024
- contexto-filtro alcanzó el estado base "Recién disponible" el 16 de septiembre de 2024, y se espera el estado "Ampliamente disponible" para el 16 de marzo de 2027
Internet Explorer nunca agregó la propiedad, lo cual sólo importa si tu tráfico todavía la incluye.
Requisito del prefijo WebKit de Safari
Los Safari más antiguos y los WebViews de iOS más antiguos todavía necesitan el prefijo -webkit- incluso después del lanzamiento de Safari 18. Mantenga ambas líneas en CSS en lugar de solo la versión sin prefijo.
Elimine el prefijo por completo y los visitantes de Safari anteriores a 2024 no verán ningún desenfoque, solo cualquier color de fondo alternativo que establezca.
¿Cuándo no funciona el morfismo de vidrio?
El morfismo de vidrio falla con mayor frecuencia en el contraste, no en el código. Si el texto en un panel de vidrio no se puede leer sobre un fondo borroso y ocupado, el efecto va en contra de la usabilidad.
Límites de contraste y accesibilidad
Las Pautas de accesibilidad al contenido web establecen una relación mínima de contraste de color (EN) de 4.5:1 para el cuerpo del texto normal (EN). Un panel translúcido colocado sobre una fotografía ocupada supera ese límite rápidamente, especialmente con texto claro sobre un fondo claro y borroso.
Pasar los colores del cristal y del texto a través de un generador de paleta de colores accesible antes del envío detecta esto antes de verlo en un monitor.
Formas comunes en que esto se rompe en la práctica:
- Texto de bajo contraste: el texto blanco sobre un fondo claro y borroso desaparece a los pocos segundos de pasar por una sección brillante
- Interfaces con mucho texto: los paneles y tablas de datos pierden más con las filas ilegibles de lo que ganan con la estética
- Navegadores más antiguos: Firefox anterior a 2022 y las reglas sin prefijos en Safari anterior a 2024 generan un panel plano y nítido que cambia todo el equilibrio visual de la página.
Costo de rendimiento en celulares
El filtro de fondo no se puede renderizar de forma gratuita. Cada panel borroso obliga al navegador a volver a pintar la capa debajo de él, y apilar varios paneles de vidrio en una pantalla aumenta ese costo.
Los teléfonos Android económicos con GPU más débiles sienten esto primero, generalmente como cuadros caídos durante el desplazamiento en lugar de una falla visible. Un panel de vidrio rara vez causa problemas.
Cinco o seis apilados en un solo tablero, que se actualizan al desplazarse, es una historia diferente.
¿Qué herramienta generadora de morfismo de vidrio CSS debería utilizar?
Aquí existen tres caminos reales: un generador dedicado como glassmorphism.com (EN), una alternativa más ligera como css.glass (EN), o codificar manualmente las cuatro propiedades usted mismo. Esta página se encuentra en el segundo grupo.
glassmorphism.com sitúa su alcance en 250,000 usuarios en 137 países, según las propias cifras de uso del sitio. Eso dice algo sobre la frecuencia con la que la gente recurre a un generador en lugar de escribir los valores desde cero.
| Herramienta | Rango de personalización | Formato de salida | Precio |
|---|---|---|---|
| glassmorphism.com | Desenfoque, opacidad, radio, ajustes preestablecidos de fondo | Crudo CSS | Gratis |
| css.vidrio | Desenfoque, opacidad, borde, saturación. | Crudo CSS | Gratis |
| este generador | Desenfoque, transparencia, contorno, saturación, 3 ajustes preestablecidos | Crudo CSS | Gratis |
| Codificado a mano | Sintonización manual ilimitada | Cualquier formato que escribas | Gratis (coste de tiempo) |
Si desea ver la variedad de estilos antes de tocar un control deslizante, es más rápido desplazarse por una galería de CSS ejemplos de morfismo de vidrio (EN) diseñados a mano que la prueba y error dentro de un generador.
Ninguno de los tres clavos en cada radio de esquina parece sacado de la caja. Emparejar el código exportado con un CSS generador de radio de borde dedicado para el pulido final es una práctica común.
Microsoft ejecuta una idea relacionada con un nombre diferente. El sistema Fluent Design de Windows 11 utiliza un material acrílico (EN) para lograr el mismo aspecto translúcido y en capas, pero adaptado a un sistema operativo diferente.
¿Debería exportar clases sin procesar CSS, SCSS o Tailwind?
El formato de exportación correcto depende de tu pila, no de cuál parece más avanzado. Raw CSS se adapta a cualquier proyecto. SCSS se adapta a equipos que ya tienen un preprocesador, y las clases Tailwind se adaptan a proyectos que ya se han creado en torno a un estilo que prioriza la utilidad.
Crudo CSS
Opción más portátil: pegue el código exportado directamente en una hoja de estilo y funcionará, sin pasos de compilación ni dependencia.
Ejecútelo a través de un minificador CSS (EN) antes de enviarlo a producción si el tamaño del archivo en la página es importante.
- Funciona bien cuando: el proyecto no tiene proceso de construcción o el efecto vidrio solo aparece en uno o dos elementos
- Agrega fricción cuando: es necesario repetir los mismos valores en una docena de componentes, ya que no hay reutilización de variables
SCSS
- Funciona bien cuando: el proyecto ya compila Sass y los paneles de vidrio aparecen repetidamente con ligeras variaciones
- Agrega fricción cuando: el proyecto no tiene un paso de compilación, ya que agregar uno solo para las variables es excesivo
Las variables SCSS y los mixins convierten las cuatro propiedades del vidrio en un único bloque reutilizable. Cambiar el radio de desenfoque en todo el sitio significa editar una línea en lugar de una docena.
Esa reutilización es el argumento completo para elegir SCSS en lugar de raw CSS aquí.
Tailwind CSS
Si el proyecto ya se apoya en las clases de utilidad de Tailwind (EN), traducir los valores de desenfoque y opacidad a backdrop-blur (EN) y la sintaxis de valor arbitrario de Tailwind mantiene todo en un sistema en lugar de dividir los estilos en dos.
- Funciona bien cuando: el resto de la interfaz ya está integrado en Tailwind clases de utilidad
- Agrega fricción cuando: el valor de desenfoque u opacidad no se asigna claramente a la escala predeterminada de Tailwind, lo que obliga a valores arbitrarios como
backdrop-blur-[14px]
Mezclar clases simples CSS y Tailwind para el mismo componente tiende a complicarse rápidamente. Elige un formato de exportación por componente y quédese con él.
¿Cómo se construye paso a paso un efecto de morfismo de vidrio?
La creación del efecto sigue el mismo orden cada vez: primero el fondo, luego las cuatro propiedades del vidrio, luego un respaldo del navegador.
Esto supone una familiaridad básica con la sintaxis CSS en lugar de enseñarla desde cero.
- Paso 1: Coloque un degradado o un fondo de imagen en el elemento principal o en la página misma
- Paso 2: Coloque el recipiente de vidrio de manera que quede sobre ese fondo, usando posicionamiento relativo o absoluto
- Paso 3: Agregue
backdrop-filtercon un valor de desenfoque, combinado con-webkit-backdrop-filterpara Safari anterior - Paso 4: Establezca el color de fondo en un valor rgba o hsla translúcido para que la luz pase
- Paso 5: Agregue un borde claro y semitransparente y un cuadro de sombra suave
- Paso 6: Envuelva un fondo opaco en un bloque
@supportspara navegadores sin filtro de fondo
Los pasos del tres al seis, con los valores predeterminados del generador, tienen este aspecto:
.glass-panel {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
@supports not (backdrop-filter: blur(1px)) {
.glass-panel {
background: rgba(255, 255, 255, 0.85);
}
}Un paso adicional es importante después de esos seis: probar el panel en algunos puntos de interrupción usando consultas de medios (EN). Un radio de desenfoque que se ve bien en el escritorio a menudo parece demasiado pesado en una pantalla pequeña.
Esta secuencia es la misma si utilizas un generador o escribes el código a mano. La herramienta de arriba realiza por ti los pasos del tres al cinco y te entrega el bloque terminado. Los pasos uno, dos y seis siguen a tu cargo.
¿Cómo se personalizan los valores de desenfoque, transparencia, borde y sombra?
Cuatro valores deciden si un panel de vidrio se ve pulido o desordenado: radio de desenfoque, alfa de fondo, opacidad del borde y radio de esquina.
| Propiedad | Rango típico | Valor predeterminado común |
|---|---|---|
| Radio de desenfoque | 5px a 20px | 10px a 16px |
| Fondo alfa | 0.1 a 0.3 | 0.15 a 0.2 |
| Opacidad del borde | 0.2 a 0.4, blanco | 0.3 |
| Radio de esquina | 8px a 24px | 12px a 16px |
Los valores predeterminados varían entre las herramientas. El generador de CSSPortal (EN) comienza cerca del desenfoque (10px) con aproximadamente un 20% de opacidad, lo que se ve sutil en un fondo fotográfico ocupado. Este comienza en desenfoque (10px) con 30% de opacidad y saturación (180%).
Saturación y brillo: el filtro de fondo acepta más que una función de desenfoque. saturate() o brightness() suelen viajar junto a él para realzar los colores que se filtran a través del cristal.
Un generador de filtros de color (EN) dedicado es una forma más rápida de marcar valores de saturación y brillo que escribir números a ciegas.
Elección de función de color: rgba() es el valor predeterminado en la mayoría de los generadores. hsla() se lee de forma más intuitiva una vez que ya estás pensando en el tono y la luminosidad en lugar de en los canales rojo, verde y azul.
Convertir primero un color de marca hexadecimal en valores basados en tonos, a través de un convertidor HSL a RGB, facilita el cambio.
Ninguno de estos valores difumina nada de forma predeterminada. La especificación del módulo de efectos de filtro (EN) establece el valor inicial del filtro de fondo en none, por lo que un panel permanece nítido hasta que se escribe explícitamente una función de filtro.
¿Qué errores comunes rompen el efecto del morfismo de vidrio?
Cuatro errores repetibles causan la mayoría de las fallas del morfismo del vidrio, y ninguno de ellos tiene que ver con el mal gusto.
| error | Arreglar |
|---|---|
| Olvidar el prefijo -webkit- | Empareje el filtro de fondo con -webkit-backdrop-filter en cada regla |
| No hay respaldo para navegadores no compatibles | Envuelve un fondo opaco en @supports not (backdrop-filter: blur(1px)) |
| Usando un polirelleno JavaScript | En su lugar, recurra a una imagen de fondo estática |
| Colocar vidrio sobre un fondo plano | Primero agregue un degradado o una foto detrás del panel. |
El propio artículo web.dev de Google sobre el filtro de fondo (EN) recomienda esa tercera solución exacta: recurrir a una imagen simple en lugar de un polirelleno JavaScript. Un polyfill añade un coste real de tiempo de ejecución a lo que es un efecto puramente decorativo.
Saltarse ese respaldo no sólo se ve peor en los navegadores antiguos. Rompe silenciosamente la accesibilidad web (EN) para cualquiera que todavía ejecute una versión de Firefox anterior a 2022 o un WebView anterior.
Un error más reciente ha aparecido desde 2025: confundir la salida de este generador con Liquid Glass de Apple. Apple presentó ese material basado en refracción y movimiento (EN) en la WWDC el 9 de junio de 2025, y lo envió a iOS 26 y macOS Tahoe 26.
Cuatro propiedades estáticas CSS no pueden reproducir la refracción ni la respuesta táctil en tiempo real. Eso depende de la representación nativa, no solo del filtro de fondo, así que no le prometa a un cliente "Liquid Glass" cuando el entregable es un panel de morfismo de vidrio CSS.
Si es difícil detectar un error en la salida minimizada del generador, ejecutar el código a través de un CSS embellecedor (EN) primero hace que las cuatro propiedades sean más fáciles de escanear línea por línea.
Preguntas frecuentes: Generador de efecto vidrio CSS
¿De dónde viene la tendencia de diseño del morfismo del vidrio?
El término se remonta al artículo de Michal Malewicz de de noviembre de 2020 en Hype4.Academy, que agrupaba interfaces de vidrio esmerilado dispersas bajo un nombre compartido. El estilo visual es anterior a la etiqueta. Apareció en paneles translúcidos del sistema operativo antes de que el filtro de fondo existiera como CSS.
¿Es el glassmorfismo lo mismo que el neumorfismo?
No, funcionan con una lógica visual opuesta. El morfismo de vidrio se basa en transparencia y desenfoque, superponiendo un panel transparente sobre un fondo degradado ajetreado. El neumorfismo utiliza sombras suaves de colores coincidentes sobre una superficie sólida para hacer que los elementos parezcan extruidos o presionados.
¿Necesitas JavaScript para crear un efecto de morfismo de vidrio?
No. El efecto se ejecuta completamente en filtro de fondo, color de fondo, borde y sombra de cuadro, cuatro propiedades CSS con sin secuencias de comandos involucradas. JavaScript solo ingresa a la imagen para alternar temas, animar el desenfoque al desplazarse o ejecutar la propia interfaz deslizante del generador.
¿Cuánto cuesta un generador de morfismo de vidrio CSS?
Cada generador cubierto aquí, este, glassmorphism.com y css.glass incluidos, no cuesta nada de usar. Las alternativas pagas aparecen en su mayoría como funciones incluidas dentro de suscripciones de kits de interfaz de usuario más grandes o mercados de complementos Figma, no como herramientas independientes con efecto de vidrio.
¿Puedes usar un generador de morfismo de vidrio con React o Figma?
Sí, de diferentes maneras. La salida CSS de un generador cae en el className de un componente React o en un bloque de componentes con estilo con no se necesita conversión. Figma no tiene propiedad de filtro de fondo, por lo que los diseñadores lo recrean aprendiendo a desenfocar capas en Figma (EN) y apilar rellenos.
¿Qué herramientas ayudan a depurar problemas de renderizado del filtro de fondo?
El panel de renderizado de Browser DevTools muestra si una capa realmente se está componiendo en la GPU o recurriendo a la pintura del software. Activar y desactivar la declaración del filtro de fondo en el panel Estilos aísla la propiedad cuando un panel parece inesperadamente plano.
¿Qué debería solucionar primero después de usar un generador de morfismo de vidrio CSS?
El código exportado de un CSS generador de morfismo de vidrio necesita contraste verificado antes de desenfocar el radio o redondear las esquinas. El texto ilegible en un panel translúcido rompe la página para los usuarios reales, mientras que un valor de desenfoque a unos pocos píxeles de distancia solo parece ligeramente sin pulir.
Arreglar el orden importa más que arreglar todo a la vez.
- Contraste entre texto y panel de cristal.
- Prefijo de proveedor y respaldo del navegador
- Radio de desenfoque y refinamiento de esquinas
El filtro de fondo ya aparece en el 35.7% de las cargas de páginas de Chrome en septiembre de 2026, según Estado de la plataforma Chrome (EN), a pesar de que Firefox solo agregó soporte sin prefijos en 2022. La mayor parte de esa adopción se produjo en los últimos cuatro años.
Una vez que se pasan esas tres comprobaciones, la siguiente parada natural es explorar el CSS neumorfismo (EN) para interfaces que necesitan una alternativa más pesada y táctil a los paneles de vidrio translúcido.