Genere visualmente efectos CSS de vidrio esmerilado para su interfaz de usuario.
Ajusta tres controles deslizantes — desenfoque, transparencia y opacidad del borde — y observa cómo se actualiza el efecto de vidrio esmerilado en tiempo real. Cuando estés conforme, copia el CSS listo para usar.
Usa los tres controles para ajustar la cantidad de desenfoque, la transparencia y la opacidad del borde. El cuadro de vista previa se actualiza en tiempo real. Copia el CSS generado del cuadro de texto al final del panel.
La UI de estilo glass funciona mejor cuando se siente intencionada y no solo ornamental. Un panel necesita suficiente blur para separarse del fondo, suficiente opacidad para sostener contenido legible y suficiente definición de borde para conservar su forma. Esas decisiones son visuales, sutiles y difíciles de tomar a partir de valores CSS en bruto.
Esta herramienta te permite ajustar directamente esa superficie y llevar el CSS resultante a una interfaz real.
Los paneles de cristal suelen usarse para sacar texto o controles de una imagen o un fondo colorido sin taparlo por completo.
Menús, paneles laterales y tarjetas flotantes a veces se benefician de sentirse más ligeros que un bloque sólido de color.
Si un producto usa capas translúcidas, normalmente necesitas una forma repetible de comparar variantes sutiles en vez de reinventar el efecto componente a componente.
Un desenfoque fuerte puede verse pulido en una demo y aun así resultar pesado o distractor en una interfaz real.
Si el fondo atraviesa demasiado, el efecto deja de ayudar a la legibilidad y empieza a perjudicarla.
En una UI tipo glass, el tratamiento del borde hace más trabajo del que parece. Sin suficiente definición, el panel pierde su forma.
Aquí es donde el efecto puede ser realmente útil: separación suave sin un bloque totalmente opaco.
Algunos layouts ganan con una superficie más ligera, pero solo si el panel sigue leyéndose con claridad sobre contenido real.
Si el efecto forma parte de un lenguaje más amplio de UI, la consistencia importa más que un único ejemplo dramático.
Esta herramienta genera el CSS visual para un efecto glass. No garantiza contraste de texto, no resuelve problemas de rendimiento en dispositivos modestos ni decide si el efecto es una buena elección de diseño. Ayuda a afinar el tratamiento, no a justificarlo.
Bien hecho, el efecto glass crea separación sin pesadez visual. Mal hecho, reduce la legibilidad. Un generador es útil porque la línea entre ambos resultados suele depender de ajustes pequeños, no de grandes ideas.
El glassmorphism requiere un fondo de colores o una imagen detrás del elemento. En un fondo blanco liso, el desenfoque no tiene nada sobre lo que actuar y el efecto no es visible.
Sí — en todos los navegadores modernos (Chrome, Firefox, Safari, Edge). El CSS generado incluye automáticamente el prefijo -webkit- para Safari.
Esta herramienta funciona completamente en tu navegador. Nada de lo que escribes o pegas se envía a ningún servidor — todo el procesamiento ocurre localmente en tu dispositivo.