Mcatorce Suite
← Volver a herramientas

Generador CSS de Glassmorphism

Crea una tarjeta de vidrio esmerilado con desenfoque de fondo y copia el CSS.

Vidrio esmerilado El fondo se ve a través, suavemente desenfocado.
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.38);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
backdrop-filter necesita algo detrás del elemento que desenfocar, como una imagen o un degradado. Prueba el rendimiento en dispositivos modestos.

¿Qué es el glassmorphism?

El glassmorphism es un estilo visual en el que un panel parece vidrio esmerilado: es translúcido, el contenido de detrás se desenfoca y un borde claro y fino define el contorno. En CSS se apoya en la propiedad backdrop-filter, que aplica efectos como el desenfoque y la saturación a lo que se renderiza detrás del elemento, junto con un color de fondo semitransparente.

El efecto solo funciona cuando hay algo interesante detrás del panel, como una foto, un degradado o formas. Mantén un contraste alto en el texto, ya que un fondo desenfocado y cargado puede dificultar la lectura de textos pequeños. Los navegadores sin backdrop-filter muestran simplemente el color translúcido, así que elige una opacidad que se vea aceptable por sí sola.

Cómo usar el generador

  1. Ajusta el desenfoque, la opacidad, la saturación y el radio de esquina mientras miras la vista previa.
  2. Elige un color de tinte y decide si incluir el borde claro.
  3. Copia el CSS y aplícalo a tu tarjeta, barra de navegación o modal.

Casos de uso comunes

  • Tarjetas sobre imágenes - coloca contenido legible encima de fotografías.
  • Barras de navegación - crea una cabecera fija translúcida.
  • Modales y popovers - mantén visible el contexto detrás de una superposición.