Generador de Glassmorphism CSS con vista previa
Este generador de glassmorphism CSS crea el efecto de vidrio esmerilado de forma visual: ajusta los controles deslizantes y observa cómo un panel de cristal se actualiza al instante, luego copia el CSS listo para producción. El efecto se basa en backdrop-filter: blur() para desenfocar lo que haya detrás del elemento, combinado con un fondo semitransparente y un borde sutil para lograr el aspecto característico del cristal.
Controlas cada parte del efecto: intensidad del desenfoque, color y opacidad del fondo, saturación, ancho y opacidad del borde, radio del borde y sombra. Está pensado para tarjetas y paneles, barras de navegación esmeriladas, modales y superposiciones, además de barras laterales o widgets que flotan sobre fondos llenos de color.
Cómo crear un efecto de cristal esmerilado
Parte de un ajuste predefinido
Haz clic en cualquiera de los 6 ajustes predefinidos — Esmerilado blanco, Cristal oscuro, Resplandor neón, Niebla sutil, Sueño pastel o Ámbar cálido — para cargar un estilo de cristal listo como base.
Refina los controles
Ajusta Desenfoque, Saturación, Color, Opacidad, ancho y opacidad del Borde, Radio del borde y Sombra. Cada control tiene un deslizador para cambios rápidos y un campo numérico para valores exactos.
Previsualiza sobre cualquier fondo
El panel de cristal se actualiza en tiempo real. Usa el selector de fondo para probarlo sobre Manchas degradadas, tu propia Imagen subida o un Color sólido.
Copia el CSS
Haz clic en Copiar para llevar el CSS generado al portapapeles y pégalo directamente en la hoja de estilos de tu proyecto.
Características
Vista previa en vivo
Cada cambio se refleja al instante en el panel de cristal sobre coloridas manchas degradadas, para que valores el efecto en tiempo real.
Desenfoque ajustable
Fija el desenfoque de backdrop-filter entre 0 y 30px para controlar qué tan marcado se ve el cristal esmerilado.
Color y opacidad
Tiñe el cristal con cualquier color y regula la opacidad del fondo de 0 a 100% para equilibrar transparencia y contraste.
Control de saturación
Aumenta la vivacidad del color a través del cristal de 100% a 200% para que el fondo detrás resalte más.
Borde y radio
Da forma al borde del cristal con ancho y opacidad ajustables, más un radio del borde de 0 a 50px para esquinas redondeadas.
Profundidad de sombra
Añade una box-shadow suave con opacidad ajustable para darle al panel de cristal una sensación de elevación.
6 ajustes predefinidos
Esmerilado blanco, Cristal oscuro, Resplandor neón, Niebla sutil, Sueño pastel y Ámbar cálido te dan un punto de partida cuidado.
Fondos flexibles
Previsualiza sobre manchas degradadas, un color sólido personalizado o tu propia imagen subida para ver el cristal sobre contenido real.
CSS listo para producción
El código generado incluye el prefijo -webkit-backdrop-filter para Safari, así que funciona en los navegadores modernos.
Copia con un clic
Copia todo el CSS al portapapeles con un solo botón — sin seleccionar a mano ni volver a escribir.
Preguntas frecuentes
¿Qué es el glassmorphism?
El glassmorphism es una tendencia de diseño de interfaces que crea un efecto de vidrio esmerilado con CSS. Combina backdrop-filter: blur() para desenfocar el fondo detrás de un elemento, un color de fondo semitransparente, un borde claro y sutil, y una sombra suave para que el elemento parezca un panel de cristal.
¿Por qué el cristal se ve invisible sobre un fondo blanco?
El efecto usa backdrop-filter: blur(), que desenfoca lo que haya detrás del elemento. Sobre un fondo blanco liso no hay nada que desenfocar, así que el cristal parece invisible. Pruébalo mejor sobre degradados, imágenes o colores llenos de color — el fondo de Manchas degradadas de la vista previa es ideal para esto.
¿Qué valor de desenfoque de backdrop-filter conviene usar?
Un desenfoque entre 8 y 15px funciona bien para la mayoría de los diseños. Por debajo de unos 5px el esmerilado queda demasiado tenue, mientras que por encima de 20px el cristal empieza a verse opaco. El mejor valor depende de qué tan recargado esté tu fondo.
¿Funciona backdrop-filter en Firefox y Safari?
Sí. backdrop-filter es compatible con las versiones actuales de Chrome, Firefox, Safari y Edge. El CSS generado también incluye el prefijo -webkit-backdrop-filter para Safari antiguo. Para navegadores heredados, añade un fondo semitransparente sólido como alternativa.
¿Qué opacidad de fondo se ve mejor para un efecto cristal?
Una opacidad entre 15% y 30% suele mantener el cristal lo bastante transparente para mostrar el fondo sin perder legibilidad. Para texto sobre el panel, inclínate por el extremo más alto y combínalo con al menos 10px de desenfoque y texto blanco con una sombra sutil.
¿Puedo usar el fondo de imagen subida en producción?
La carga de imagen es solo para la vista previa: te ayuda a ver cómo luce el cristal sobre contenido real. En producción colocarías el elemento de cristal sobre el contenido o las imágenes de fondo de tu propia página. La imagen que subes aquí se queda en tu navegador y nunca se envía a ningún sitio.
¿El glassmorphism afecta el rendimiento?
backdrop-filter puede exigir mucho a la GPU, sobre todo con valores de desenfoque altos. Para un renderizado fluido, usa el glassmorphism en unos pocos elementos clave, como tarjetas o barras de navegación, en lugar de en cada componente, y mantén los valores de desenfoque razonables — por lo general por debajo de 20px.
Aún no hay comentarios. ¡Sé el primero en comentar!