Generador de CSS para un efecto de vidrio de alta resolución

• Proporciona una forma de implementar un efecto de vidrio de alta resolución con código CSS
• Aplica filtros visuales como blur, brillo (brightness) y saturación (saturate), además de sombras en múltiples capas
• Usa pseudo-elements para crear efectos de capas frontal y trasera, así como tratamiento de textura
• Puede aplicarse y personalizarse en distintas interfaces con una sola clase CSS concisa
• Resulta útil para incorporar rápida y modernamente un efecto de vidrio de alta resolución en proyectos web

---

Introducción

Este código CSS está especialmente diseñado para crear un efecto de vidrio de alta resolución en interfaces web. Permite una presentación más detallada y con mayor sensación de profundidad que el efecto glassmorphism tradicional, y se puede comprobar el resultado de forma intuitiva con solo aplicar una única clase de CSS.

Contenido principal

• La clase .glass3d incorpora varios efectos de filtro visual como blur(32px), brillo (0.85) y saturación (2.5), además de texturas de color y ruido
• La composición de box-shadow en varias etapas recrea una sensación de vidrio verdaderamente tridimensional
• En el pseudo-elemento ::before, se superponen backdrop-filter, color e imágenes de fondo con ruido para expresar transparencia de fondo y textura con relieve
• En el pseudo-elemento ::after, se añade una sombra interna (inset) para dar el efecto de reflejo de luz sobre una superficie de vidrio real
• Mediante la separación de z-index, la estructura permite que los efectos por capa se muestren correctamente sin entrar en conflicto
• Con el selector .glass3d > *, se asegura que el contenido de los elementos hijos siempre aparezca en la capa superior

Contexto de uso y ventajas

• Sin librerías ni dependencias externas, es posible implementar una interfaz con efecto de vidrio moderno y en tendencia usando una sola clase CSS
• Puede aplicarse y ampliarse fácilmente en sistemas de diseño UI, tarjetas, popups y botones, por lo que resulta muy útil para desarrolladores frontend web
• Gracias al uso de imágenes de patrón reales para la textura, combinaciones de colores variadas y efectos de sombra en múltiples etapas, ofrece ventajas en profundidad y expresión de luces y sombras frente a las técnicas de glassmorphism convencionales

[GN⁺]

Comentarios en Hacker News

• Hice una versión que aplica un efecto real de refracción a los elementos de la página con JavaScript, así que recomiendo verla: https://real-glass.vercel.app/

• Este efecto tiene la limitación de que solo desenfoca los píxeles que están justo detrás de la superficie; recomiendo revisar el artículo de Josh Comeau que explica bien este fenómeno (https://www.joshwcomeau.com/css/backdrop-filter/#the-issue) y la discusión en Hacker News (https://news.ycombinator.com/item?id=42302907). Si el fondo se mueve, es un tema bastante importante, pero si está fijo, normalmente no importa mucho.

  • Leí el excelente artículo de Josh e intenté implementarlo siguiendo el tutorial, pero tuve problemas al manejar border-radius con una máscara SVG. Funcionó bien en elementos hardcodeados, pero sigo pensando cómo agregar una forma de usarlo en toda una librería de componentes donde el border-radius cambia según la marca o los container queries.
  • La solución de Josh intuitivamente se siente como si algo estuviera mal, porque asume que los elementos alrededor son materiales que emiten luz, y no creo que esa sea una propiedad física básica de un "material" en la web. Yo, por defecto, asumo que un material se parece más al papel.

• Está muy bien logrado, pero si falta el efecto de refracción del vidrio, se pierde la fuerte separación visual por capas de Liquid Glass. Si ves los recursos de diseño de Material, enfatizan que la app debe estar compuesta por capas 3D coherentes en movimiento. Pero cuando en realidad lo implementas en 2D y todos los elementos se mezclan, distinguir cada capa se vuelve muy difícil. A menudo la gente no encuentra los botones de acción en las esquinas. El movimiento sí ayuda a separar el chrome del contenido, pero visualmente no destaca demasiado. Creo que la mayor fortaleza de Liquid Glass es la edge distortion (distorsión en los bordes), porque genera un movimiento no lineal que el ojo humano detecta de inmediato cuando el contenido se mueve. Con movimiento, la separación entre capas se vuelve más clara. Ese importante componente de refracción aquí no está. Implementar edge distortion con filtros SVG no es fácil y, al final, es un trabajo bastante complejo. Si revisas la explicación paso a paso en https://atlaspuplabs.com/blog/liquid-glass-but-in-css/…, se nota la complejidad. Y también encontré una colección de CodePen Spark con varios intentos de implementar Liquid Glass; también recomiendo una referencia bastante buena hecha con SVG hardcodeado: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

  • Creo que Apple creó un moat inteligente con Liquid Glass. Cualquiera puede hacer una versión barata con facilidad, pero lograr que se vea realmente auténtica es muy difícil. Vemos vidrio real todos los días, así que podemos distinguir de forma intuitiva entre "real y falso". Por eso los productos de imitación se notan, y Apple puede mantener esa "sensación premium".
  • Me parece realmente genial la edge distortion de Liquid Glass, así que planeo volver a recrearla algún día. Mi proyecto actual se enfoca en pulir detalles, cuidar la compatibilidad entre navegadores e implementar materiales sin usar 3D real. Y coincido en que el efecto destaca más cuando las capas se mueven sobre un fondo fijo. El demo site que estoy desarrollando ahora ya tiene algo de eso, aunque todavía no está terminado. Gracias por compartir buenos materiales.
  • Estoy de acuerdo en que la refracción del vidrio genera esa sensación de separación visual por capas. Pero a mí me parece demasiado distractora y en algunos entornos no se ve bien. Sí, es un fenómeno físico real del vidrio, pero no necesariamente hace falta. Me da la impresión de que amplifica justo el elemento de skeuomorphism que menos me gustaba. Por cierto, yo prefería el diseño anterior a iOS 7.

• El efecto como tal está bueno, pero no siento mucho que parezca vidrio. La diferencia que se nota de inmediato es que la luz no reacciona en absoluto al bevel (bisel o curvatura del borde). También esperaría que la luz se reflejara en el vidrio y afectara la iluminación o el color; solo con un efecto de blur eso es difícil. Y el vidrio también puede producir sombras características, especialmente caustics, pero parece que Apple tampoco cuidó esa parte. La sombra actual se ve como un simple drop shadow, así que refuerza más la sensación de una tarjeta plana que la de un objeto 3D. Eso se aleja del centro de la tendencia reciente. Este tipo de efecto sería difícil de implementar solo con CSS; probablemente sería más apropiado ejecutarlo como shader en la GPU.

  • Si no se puede hacer con CSS, me da curiosidad cuál sería la alternativa. También dudo si se puede aplicar un efecto de shader de GPU a un div común. Si no se pueden poner efectos de GPU directamente sobre HTML básico, entonces quizá sea mejor hacer un motor de renderizado nuevo con algo tipo canvas personalizado. El HTML ya perdió sentido y el tag <p> solo sirve para entregar texto mientras el resto se usa para anuncios; mejor dejamos solo <p> y hacemos un nuevo comienzo completo con mejor integración con la GPU.

• Estoy recopilando este tipo de muestras de diseño: https://github.com/swyxio/spark-joy
  También recomiendo algunos recursos relacionados:

  • https://ui.glass/generator/ : generador gratuito de CSS con estilo glassmorphism
  • frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/
  • muestras de glassmorphism pen: codepen, in context
  • ejemplo de CSS con efecto de blur + rotación

    .blur-and-rotate {
     border-radius: 20px;
     backdrop-filter: blur(20px) hue-rotate(120deg);
     -webkit-backdrop-filter: hue-rotate(120deg);
    }
    

  • Gracias por agregar este proyecto a la lista de spark-joy.
  • Creo que Spark Joy es un recurso muy bueno.
  • Encontré un ASCII Font generator que parece no estar en spark-joy, así que comparto una herramienta que uso seguido: https://patorjk.com/software/taag/…

• Siento que la usabilidad habría sido mucho mejor si en móvil hubiera una opción para ocultar o plegar la caja. La caja ocupa toda la pantalla y no deja ver bien el efecto de atrás. Igual me pareció interesante, así que pienso volver a probarlo en una pantalla grande. Una opción para ocultar la caja ayudaría bastante.

• Parece que usa una técnica similar a la de mi implementación de glass: https://news.ycombinator.com/item?id=42225481, sobre todo por el uso intensivo de box shadow.

  • Tu proyecto está realmente muy bueno. Me alegra ver que no soy el único desarrollador que usa varias capas de sombra para dar profundidad. La idea de agregar Light Rays me impresionó especialmente.

• Funciona bien como efecto para fondo web.

• En mi teléfono el scroll va bastante lento. No sé si hay algún otro efecto de scroll intencionalmente ralentizado o si es un efecto secundario del glass.

  • Qué observación tan interesante. La página no tiene ningún efecto de scroll. Si puedes, me gustaría saber qué dispositivo, navegador y condiciones de red estás usando.
  • En mi equipo con M4 y 128 GB de RAM funciona bien.

• Creo que está realmente muy bien hecho. Siempre me sorprende que los gráficos por computadora no sean “una sola técnica especial”, sino en realidad “cinco capas de trucos”. También creo que el soporte cross-browser debe ser un gran reto. ¿Tienes idea de qué parte consume más recursos? Mi intuición diría que backdrop-filter.

  • Yo tampoco esperaba que hicieran falta tantos trucos. La parte más pesada es el procesamiento de blur de backdrop-filter. Cuanto mayor es el valor de blur, más información de píxeles circundantes tiene que revisar para renderizar. Otra parte que consume recursos es la actualización en tiempo real de la apariencia del glass cuando haces scroll o cuando cambia un fondo de video.
  • A veces, hasta para simplemente centrar algo, terminas necesitando “cinco capas de trucos”.