Generador de Glassmorphism
Crea CSS de tarjetas de cristal esmerilado con controles de desenfoque, transparencia, tinte, borde y radio, todo directamente en tu navegador.
🔒 Se ejecuta completamente en tu navegador — nada se cargaCrea una superficie de cristal esmerilado
El glassmorphism funciona dejando que el fondo se vea a través de una superficie translúcida mientras un desenfoque suaviza lo que hay detrás. El resultado puede resultar pulido y moderno si se usa con moderación. Este generador de glassmorphism te da control directo sobre los elementos importantes: tinte, transparencia, desenfoque de fondo, opacidad del borde, radio y sombra. Al ajustar los valores, la tarjeta se actualiza sobre un degradado colorido para que puedas juzgar si el efecto de cristal es visible sin hacer que el contenido sea difícil de leer.
El CSS generado incluye background, backdrop-filter, la propiedad equivalente con prefijo
WebKit, un borde sutil, radio de borde y sombra. Esas declaraciones bastan para una tarjeta reutilizable, un panel de navegación, un modal, una superposición hero o un widget de panel de control. Como el efecto es puro
CSS, no hay imágenes que exportar ni procesamiento en servidor. El navegador renderiza la vista previa y
el botón de copiar escribe el texto CSS en tu portapapeles.
Equilibrar transparencia y legibilidad
El error más común en el glassmorphism es hacer la tarjeta demasiado transparente. Una opacidad baja puede verse impresionante en una vista previa vacía, pero los títulos, etiquetas e iconos reales necesitan suficiente contraste para seguir legibles sobre cualquier fondo. Aumenta la opacidad cuando el fondo sea complejo, redúcela cuando el fondo sea simple y usa el borde para separar la superficie de colores similares. El desenfoque ayuda a reducir el detalle detrás de la tarjeta, pero no sustituye las pruebas de contraste.
Dónde usar el efecto
El cristal esmerilado funciona mejor en momentos concretos: una tarjeta de precios sobre un degradado hero, una barra de herramientas flotante, un resumen de perfil o un modal sobre una ilustración rica. Se vuelve ruidoso cuando todos los componentes lo usan a la vez. Tras copiar el CSS, pruébalo en el diseño real y añade un fondo sólido de reserva si das soporte a navegadores antiguos o dispositivos de muy bajo consumo. Una buena tarjeta de cristal debe transmitir capas sin perder la claridad de la jerarquía de la interfaz ni del contenido.
Cómo usar
- Elige el color del cristalSelecciona el tinte que se coloca sobre el fondo.
- Ajusta desenfoque y opacidadModifica la transparencia, el desenfoque de fondo, la intensidad del borde y el radio.
- Copia el CSSPega los estilos de tarjeta de cristal generados en tu componente.