Cómo usar: Generador de Glassmorphism
- Ajusta el desenfoque, la saturación y la opacidad del fondo hasta que la tarjeta se vea bien sobre el fondo de ejemplo.
- Cambia el fondo de la vista previa para comprobar la legibilidad sobre imágenes con mucho detalle o diseños oscuros.
- Copia el CSS (con prefijo y fallback) o las clases de valores arbitrarios de Tailwind.
- Recuerda: el efecto solo se ve cuando hay algo con color detrás del elemento.
¿Qué es el glassmorphism?
El glassmorphism es el estilo de cristal esmerilado popularizado por macOS y Windows 11: un panel semitransparente que desenfoca lo que hay detrás, normalmente con un borde fino y claro y una sombra suave. En CSS se crea con backdrop-filter: blur() y un color de fondo translúcido.
Explicación del CSS
background: rgba(255,255,255,.18)— el tinte. Si es demasiado opaco, el desenfoque desaparece; si es demasiado transparente, el texto cuesta leerlo.backdrop-filter: blur(12px) saturate(160%)— desenfoca y realza ligeramente los colores detrás del elemento, lo que evita que el cristal se vea grisáceo.-webkit-backdrop-filter— Safari sigue necesitando el prefijo para un soporte fiable, y es la línea que más se suele olvidar.- Un borde blanco semitransparente de 1px define el contorno del cristal.
Rendimiento y accesibilidad
El desenfoque de fondo consume mucha GPU: evita áreas grandes con desenfoque que se animen o se coloquen sobre vídeo, y prueba el scroll en móviles de gama baja. Comprueba siempre el contraste del texto sobre la parte más exigente del fondo con el Verificador de contraste, y mantén la regla de fallback para que los navegadores sin soporte reciban un fondo legible y más opaco.
En Webflow
El panel Style de Webflow tiene una opción Backdrop filters dentro de Effects: añade ahí Blur (y Saturate), define el color de fondo con alfa y Webflow generará el CSS necesario.
También se busca como: glassmorphism css, backdrop-filter, efecto cristal esmerilado, desenfoque fondo css, efecto glass css, webkit-backdrop-filter, generador glassmorphism.
Herramientas que combinan con: Generador de Glassmorphism
- Generador de Box Shadow — Apila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre una tarjeta en vivo, y luego copia el CSS de box-shadow o text-shadow.
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Generador de valores arbitrarios Tailwind — Pega tu CSS y obtén la sintaxis de corchetes de Tailwind bien a la primera: los espacios se convierten en guiones bajos, se añaden indicadores de tipo y las propiedades no soportadas se envuelven como propiedades arbitrarias.
- Conversor HEX a RGBA — Pega un código HEX, arrastra el deslizador de opacidad y copia el CSS exacto que necesitas: rgba() clásico, rgb( / alpha) moderno o HEX de 8 dígitos.
Preguntas frecuentes
¿Por qué no funciona backdrop-filter?
-webkit- para Safari.¿backdrop-filter es compatible con todos los navegadores?
¿Cuál es la diferencia entre filter: blur y backdrop-filter: blur?
filter desenfoca el propio elemento, incluido su texto. backdrop-filter desenfoca solo lo que hay detrás del elemento, así que su contenido se mantiene nítido.