Usa el Generador de Efecto Cristal gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Qué hace el cristal esmerilado en una página
El cristal esmerilado, a menudo llamado glassmorphism, es un panel en parte transparente y en parte desenfocado. Todavía se perciben el color y las formas que hay detrás, pero no se pueden leer con claridad. Esa mezcla es la razón por la que el efecto se siente moderno: el panel flota sobre la página en lugar de apoyarse en un color plano. Los diseñadores lo usan para tarjetas, barras de navegación, reproductores de música y cuadros de inicio de sesión. El desenfoque es la parte clave. Sin desenfoque, el panel es solo una caja transparente, y el texto puede chocar con lo que hay detrás. Con desenfoque, el fondo se funde en color suave y el texto del panel sigue siendo fácil de leer.
La herramienta de arriba crea este efecto con CSS real. Eliges un fondo y luego ajustas el desenfoque, la transparencia, el radio de las esquinas y el borde. La vista previa se actualiza de inmediato, así que puedes ver la diferencia entre un esmerilado ligero y uno intenso. El cuadro de código te da el CSS exacto del panel que acabas de crear. Cópialo en tu propia hoja de estilos, cambia el nombre de la clase si lo necesitas, y el mismo aspecto aparecerá en tu sitio. No se sube nada ni se guarda nada, porque toda la herramienta funciona en tu navegador.
Cómo usar el generador
Empieza con un fondo. Los degradados de atardecer, océano, bosque y rosa sirven para probar el panel contra colores intensos. Un panel que se ve bien sobre un degradado intenso normalmente también se verá bien sobre una foto. Después, mueve el control de desenfoque. Los valores pequeños, de 4 a 8 píxeles, dan un esmerilado ligero que mantiene visible el detalle del fondo. Los valores de 12 a 20 píxeles dan el aspecto esmerilado clásico. Por encima de 30 píxeles, el fondo se convierte en un lavado de color puro, lo que conviene a diseños minimalistas pero oculta la imagen que hay detrás.
Luego ajusta la transparencia. El control define cuánta cantidad de blanco hay en el panel. Con un 20 por ciento de blanco, el panel es casi transparente y el color de fondo se muestra con fuerza. Con un 50 por ciento o más, el panel se vuelve lechoso y el texto resulta mucho más fácil de leer. Si el texto cuesta de leer, sube el nivel de blanco antes de cambiar cualquier otra cosa. Por último, ajusta el radio de las esquinas y el borde. Las esquinas redondeadas convienen a tarjetas y ventanas emergentes, mientras que las esquinas cuadradas convienen a barras de herramientas y paneles laterales. Un borde blanco fino, de uno o dos píxeles, ayuda a que el borde del panel destaque sobre un fondo intenso.
Cómo mantener el texto legible sobre cristal
El error más común del cristal esmerilado es el texto ilegible. Una foto oscura detrás de un panel claro todavía puede dificultar la lectura del texto oscuro en los bordes, y una foto brillante puede borrar por completo el texto blanco. La solución es el contraste, no más decoración. Pon texto oscuro sobre un panel lechoso, o texto blanco sobre un panel de tinte oscuro. Prueba el panel sobre las partes más brillantes y más oscuras de tu fondo, no solo sobre el centro. Si alguno de los extremos falla, sube la opacidad del panel o añade una sombra sutil detrás del texto.
Compatibilidad con navegadores y rendimiento
El efecto usa backdrop-filter, que funciona en todos los navegadores modernos, incluidos Chrome, Edge, Firefox y Safari. Los navegadores antiguos lo ignoran y muestran un panel translúcido normal, que sigue siendo utilizable. Esa alternativa elegante es una razón por la que la técnica es segura: nadie recibe una página rota, solo recibe un panel más simple. Para obtener el mejor resultado, mantén el fondo del panel en parte opaco, de modo que la alternativa también parezca deliberada en lugar de accidental.
Preguntas frecuentes
¿Por qué mi panel de cristal se ve gris en lugar de esmerilado? Normalmente el fondo que hay detrás es plano o demasiado pálido. El cristal esmerilado necesita color o una imagen detrás para desenfocar. Colócalo sobre un degradado o una foto y el efecto aparecerá de inmediato.
¿Puedo usar un panel de cristal oscuro? Sí. Usa un fondo translúcido oscuro, como negro al 30 por ciento, con texto blanco. Se aplica la misma regla de desenfoque, y el CSS copiado se puede editar para cambiar el blanco por negro.
¿Funciona backdrop-filter en todos los elementos? Desenfoca lo que está pintado detrás del elemento, no el elemento en sí. Si el panel está sobre una página blanca y plana, no hay nada que desenfocar, así que el panel parece plano. Eso es normal, no es un error.
Crea un panel arriba, copia el CSS y pruébalo sobre tus propias imágenes. Una tarjeta esmerilada pequeña, ajustada para un texto legible, añade profundidad sin estorbar.
Herramientas relacionadas
- Glass Effect Generator (English version)
- Visualizador de Curvas de Animación
- Generador de Animaciones por Fotogramas