Generador de glassmorphism CSS (vidrio esmerilado)

Cómo funciona

Escriba en el panel izquierdo el texto que irá dentro de la tarjeta; la vista previa dibuja con él una tarjeta de vidrio esmerilado sobre un fondo de colores. El control de desenfoque decide cuánto se difumina todo lo que queda detrás de la tarjeta: 10 píxeles bastan para la mayoría de los diseños, y con más de 20 el fondo ya no se reconoce. La opacidad del relleno fija el color propio del vidrio: 25 % se escribe rgba(255, 255, 255, 0.25) en el código. Con valores más bajos el vidrio es más claro, pero el texto encima se lee peor. La visibilidad del borde controla el filo brillante del vidrio. Con un color oscuro como #0f172a obtiene vidrio ahumado para un tema oscuro. El código escribe el desenfoque dos veces: -webkit-backdrop-filter para Safari y iPhone antiguos, backdrop-filter para los demás. Al final, una alternativa @supports sube la opacidad a 85 % en navegadores que no conocen el efecto. El vidrio solo se nota si detrás hay una imagen o un patrón de colores.

Esta herramienta también se busca como generador glassmorphism, glassmorphism css, efecto vidrio esmerilado css, backdrop filter blur, efecto cristal css, tarjeta de vidrio css.

¿Qué es Glassmorphism?

El glassmorphism es un estilo de diseño que dibuja los paneles de una interfaz como vidrio esmerilado: semitransparentes, con lo que hay detrás desenfocado. Se popularizó hacia 2020 con macOS Big Sur de Apple y el Fluent Design de Microsoft. Da profundidad entre capas, pero requiere un fondo decorativo y revisar con cuidado el contraste del texto.

¿Qué es backdrop-filter?

backdrop-filter es la propiedad de CSS que aplica filtros como blur(), brightness() o saturate() a la zona que está DETRÁS de un elemento, no al elemento mismo. El fondo del elemento debe ser al menos en parte transparente para que el efecto se vea. Como se recalcula al desplazarse por la página, puede restar rendimiento en áreas grandes.

¿Qué diferencia hay entre backdrop-filter y filter?

filter procesa el elemento MISMO: con filter: blur(10px) también se desenfocan el texto y el borde de la tarjeta. backdrop-filter procesa lo que está DETRÁS del elemento; el texto propio de la tarjeta queda nítido y solo se difumina la foto que se ve a través. Para una tarjeta de vidrio esmerilado la propiedad correcta es backdrop-filter; filter sirve para desenfocar una imagen o una sección completa.

Cuidado: sobre un fondo liso el vidrio no se ve

backdrop-filter desenfoca los píxeles que están DETRÁS de la tarjeta. Si la tarjeta está sobre un color liso, no hay nada que desenfocar y parece una caja semitransparente común. El glassmorphism necesita una foto, un degradado o formas en el fondo.

La segunda trampa es la legibilidad. Con 10 % de opacidad, el contraste del texto depende por completo de la imagen de atrás, y una zona clara se come un texto blanco. En tarjetas con texto, mantenga la opacidad entre 20 y 40 % y pruebe con el contenido real sobre la peor parte del fondo.

Compatibilidad de navegadores y cuándo usarlo

backdrop-filter funciona en todos los navegadores principales actuales, pero los detalles importan:

• Safari y los iPhone anteriores a la versión 18 solo entienden la forma -webkit- → el código trae las dos líneas
• Firefox no lo admitía antes de la versión 103 (2022) → la alternativa @supports mantiene legible el texto
• Un desenfoque fuerte puede hacer lento el desplazamiento en teléfonos sencillos → quédese por debajo de 20 píxeles en capas de pantalla completa
• Buenos lugares: barras de navegación, ventanas modales, tarjetas sobre fotos
• Malos lugares: textos largos, tablas, formularios

Preguntas frecuentes

¿Qué propiedades de CSS forman el glassmorphism?

Bastan cuatro partes: un fondo semitransparente (rgba), backdrop-filter: blur() para desenfocar lo de atrás, un borde fino semitransparente y una sombra suave. border-radius redondea el conjunto. Esta herramienta escribe las cinco en una sola regla.

¿Por qué la misma línea aparece dos veces, una con -webkit-?

Durante años Safari solo reconocía backdrop-filter como -webkit-backdrop-filter; el nombre sin prefijo llegó con Safari 18 (2024). Los iPhone y Mac más antiguos necesitan las dos líneas. Un navegador ignora la línea que no conoce, así que repetirla no hace daño.

¿Cómo hago vidrio ahumado oscuro?

Escriba un color de vidrio oscuro como #0f172a, ponga la opacidad entre 30 y 50 % y deje la visibilidad del borde en torno a 10 %. El texto de la tarjeta debe ir en blanco.

¿Qué guarda el botón Descargar?

La vista previa en PNG de 1200×800 píxeles. Para el código, use Copiar el resultado. El desenfoque de la vista previa se dibuja con el filtro de lienzo del navegador; un navegador antiguo sin ese filtro puede mostrarla nítida, y eso no afecta al CSS.