Generador CSS de glassmorphism
Genera CSS de cristal esmerilado con desenfoque y saturación de backdrop-filter, color y opacidad del tinte, borde y sombra, con el prefijo -webkit- para Safari.
Ajustes predefinidos
Ajustes del cristal
Ajustes de la vista previa
Vista previa
background: rgba(255, 255, 255, 0.25); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
Herramientas Relacionadas
Ver Todas¿Qué es Generador de glassmorphism?
Crea el efecto de cristal esmerilado (glassmorphism): un panel translúcido tintado que desenfoca y satura lo que hay detrás, con un borde claro y una sombra suave opcionales. La vista previa coloca la tarjeta sobre fondos coloridos para que puedas valorar el efecto.
Cómo usar Generador de glassmorphism
- Elige un ajuste predefinido: Esmerilado, Cristal oscuro, Tintado o Sutil.
- Ajusta el Desenfoque y la Saturación del fondo.
- Elige el Color del tinte y la Opacidad del tinte, la Opacidad del borde y el Radio.
- Activa o desactiva la Sombra proyectada y prueba distintos Fondos en Ajustes de la vista previa.
- Copia el código CSS.
Ejemplo
Ajuste Esmerilado (desenfoque 10px, saturación 180 %, blanco a 0,25, borde 0,3, radio 16px)
background: rgba(255, 255, 255, 0.25); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
Cuándo usar Generador de glassmorphism
Úsalo para tarjetas, barras de navegación y modales colocados sobre imágenes o degradados coloridos. El efecto solo se aprecia si hay algo visible detrás del elemento; sobre un color plano parece una simple caja translúcida. Comprueba el contraste del texto, porque el fondo detrás del cristal cambia.
Cómo funciona Generador de glassmorphism
El fondo del panel es el color del tinte con la opacidad elegida (rgba()), y el borde usa el mismo color con la opacidad del borde. El desenfoque y la saturación van en backdrop-filter: blur(px) saturate(%); saturate(100%) se omite porque no cambia nada. La declaración se escribe dos veces, primero con el prefijo -webkit- que Safari aún necesita y luego sin prefijo. Si el desenfoque es 0 y la saturación 100 %, no se escribe ningún backdrop-filter.
Casos de Uso Comunes
- Barras de navegación esmeriladas sobre imágenes de cabecera
- Tarjetas de cristal sobre fondos con degradado de malla
- Diálogos modales que mantienen visible el contexto
- Widgets de música o del tiempo
- Capas de cristal oscuro para controles de vídeo
Preguntas Frecuentes
¿Por qué se incluye -webkit-backdrop-filter?
Safari solo ofreció backdrop-filter con el prefijo -webkit- durante muchos años, y las versiones antiguas de iOS todavía lo requieren. Mantener ambas líneas cubre todos los navegadores actuales.
¿Por qué no veo ningún desenfoque?
backdrop-filter desenfoca lo que hay detrás del elemento. Si el elemento está sobre un color sólido, no hay nada que desenfocar; colócalo sobre una imagen o un degradado.
¿backdrop-filter consume muchos recursos?
Obliga al navegador a volver a renderizar la zona que hay detrás del elemento, así que evita zonas desenfocadas muy grandes y muchas capas de cristal superpuestas en dispositivos modestos.