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

 (glass3d.dev)
5 puntos por GN⁺ 2025-07-04 | 1 comentarios | Compartir por WhatsApp
  • glass3d generator es una herramienta que permite previsualizar y copiar al instante CSS con textura de vidrio mientras cambias los valores de configuración
  • Los ajustes clave están compuestos por blur, brightness, saturation de backdrop-filter, además de la selección de color y textura
  • El color se maneja con HSL y valor alfa; un valor de ejemplo es hsl(189 80% 10% / 0.2)
  • La textura puede elegirse entre rice paper, egg shell, ink jet, coarse y topology
  • El CSS generado combina .glass3d, ::before, ::after y el z-index de los elementos hijos para separar el filtro de fondo, la textura de ruido, la sombra interior y la capa de contenido

Valores que se pueden ajustar en glass3d generator

  • Al cambiar los valores de configuración, el resultado se refleja de inmediato en la propia interfaz
  • El CSS final puede copiarse para usarlo
  • Los principales elementos de configuración son los siguientes
    • backdrop-filter
    • blur
    • brightness
    • saturation
    • color
    • texture

Estructura del CSS generado

  • La clase .glass3d define las variables CSS y la referencia de capas
    • --filter-glass3d: blur(32px) brightness(0.85) saturate(2.5)
    • --color-glass3d: hsl(189 80% 10% / 0.2)
    • --noise-glass3d: transparenttextures.com de egg-shell.png
    • Usa position: relative, z-index: 4 y varias etapas de box-shadow
  • .glass3d::before aplica el filtro de fondo y la textura
    • Usa var(--filter-glass3d) en -webkit-backdrop-filter y backdrop-filter
    • En background-color y background-image se incluyen respectivamente la variable de color y la variable de ruido
    • Configura background-size: 100px y background-repeat: repeat
  • .glass3d::after agrega sombra de resaltado interior
    • Usa varios valores de inset box-shadow
  • .glass3d > * aplica position: relative y z-index: 6 para que el contenido se vea por encima

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-07-04
Opiniones de Hacker News

  • Este enfoque tiene el problema de aplicar el desenfoque solo con los píxeles justo detrás de la superficie, y se muestra muy bien en https://www.joshwcomeau.com/css/backdrop-filter/#the-issue
    Vale la pena leerlo junto con la discusión en https://news.ycombinator.com/item?id=42302907. Si el fondo se mueve por debajo, el problema de desenfocar solo los píxeles justo detrás es bastante importante; si el fondo es estático, normalmente no importa tanto

    • Leí el excelente artículo de Josh y también implementé el tutorial, pero tuve problemas con la parte de manejar el border-radius con una máscara SVG
      Funcionó bien en elementos con valores hardcodeados, pero todavía queda por resolver cómo hacerlo funcionar en una biblioteca completa de componentes donde el border-radius cambia según el branding del usuario y las container queries
    • La solución de Josh también se ve intuitivamente incorrecta. Parece asumir que los elementos cercanos son emisores de luz, pero es difícil decir que los “materiales” de la web tengan por defecto esas propiedades físicas
      Más bien, tiendo a pensar que el material predeterminado se parece más al papel
    • Es difícil decir cuál de las dos opciones es más correcta. El enfoque predeterminado aproxima objetos justo detrás de un vidrio esmerilado, mientras que el enfoque ajustado imita objetos mucho más lejanos
      Para mí, la versión ajustada choca con las pistas de profundidad, así que se ve mucho más distractora y más equivocada

  • Se ve bastante bien, pero si falta la refracción del vidrio, desaparece esa fuerte sensación de separación de capas que considero el mayor aporte de Liquid Glass
    Material tiene excelentes recursos para diseñadores que muestran en 3D lateral que una app debería estar compuesta por capas móviles coherentes. Pero cuando se combina todo en 2D, se vuelve muy difícil encontrar qué función está dónde. Es muy común que la gente no vea los botones de acción en las esquinas
    El movimiento ayuda un poco a distinguir el chrome del contenido, pero hay muy pocos elementos que lo definan visualmente. Creo que la mayor ventaja de Liquid Glass es la distorsión en los bordes. Cuando el contenido se mueve, aparece un movimiento no lineal, y la visión humana lo detecta de inmediato
    Las capturas estáticas no siempre se ven bien, pero en movimiento separa los elementos mucho mejor que cualquier cosa que haya visto hasta ahora. Aquí falta el elemento clave de refracción que aprovecha fuertemente la detección de movimiento humana
    Antes vi otra excelente demo web, pero ahora es difícil encontrarla; en su lugar, esta demo tiene mal rendimiento en móviles y visualmente no es tan buena, pero muestra muy bien paso a paso lo complejo que es el trabajo. Implementar distorsión de bordes solo con filtros SVG es un camino bastante duro: https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...
    También encontré una colección de intentos de Liquid Glass (CodePen Spark), y creo que el segundo enlace es un ejemplo bastante bien hecho con un SVG hardcodeado y muy específicamente predefinido: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • Parece que Apple creó un foso inteligente con Liquid Glass. Es fácil hacer una versión peor, pero eligieron un efecto cuya forma realmente correcta es muy difícil
      Como la gente ve vidrio real todos los días, tiene una intuición sobre qué se ve real y correcto. Por eso las imitaciones se ven claramente peores, y Apple puede mantener una imagen de producto que “se ve premium”
    • Estoy de acuerdo en que la distorsión de bordes de Liquid Glass se ve genial, y pienso intentar reproducirla yo mismo más adelante
      En el proyecto actual, el objetivo era crear un material que se sintiera pulido, funcionara de forma consistente entre navegadores y no usara 3D real. También es cierto que el efecto se nota mejor cuando se mueve sobre un fondo fijo. En el sitio demo de la biblioteca en la que estoy trabajando lo hago así, pero todavía no está listo
    • Que falte el efecto de refracción me parece más bien algo bueno. El vidrio esmerilado ya me parece ambiguo, pero el efecto de refracción realmente me molesta. Es demasiado distractor y, en ciertas situaciones, inevitablemente se va a ver feo
      Sé que el vidrio real se comporta así, pero no quiero tener que prestarle atención. Se siente como si hubieran tomado solo la peor parte del skeuomorfismo y la hubieran duplicado, y lo digo incluso como alguien que prefería la etapa anterior a iOS 7

  • Es un efecto genial, pero a mí no me parece vidrio real
    La diferencia más inmediata es que la luz no interactúa con el bisel. Esperaría que la luz volviera a entrar en el vidrio y también afectara la iluminación y el color. No alcanza con simplemente agregar desenfoque
    Además, el vidrio puede tener sombras propias y patrones interesantes de cáusticas. Aquí se ve una sombra, pero se siente como una simple drop shadow, así que parece más una tarjeta plana que un objeto físico 3D que forma parte del nuevo flujo
    En cualquier caso, no es fácil imitarlo solo con CSS, y un shader corriendo en la GPU parece más adecuado

    • Si no se puede hacer con CSS, no sé cómo habría que hacerlo. ¿Cómo se podría aplicar un efecto de shader de GPU a un div común? Si no se pueden aplicar efectos de GPU al HTML básico y hay que hacerlo sobre elementos custom como alguna combinación arbitraria de Canvas, quizá sea mejor rehacer por completo un nuevo motor de renderizado capaz de aplicar efectos de GPU
      Creo que HTML está muerto. Para transmitir texto bastan unas cuantas etiquetas, y casi todo lo demás se usa para convertir las páginas web en bombas de publicidad. Así que sería mejor empezar de nuevo con una etiqueta <text> y una mejor integración con GPU, y dejar fuera el resto

  • Hice una versión en JavaScript que realmente refracta los elementos de la página: https://real-glass.vercel.app/

    • En Safari no funciona el efecto esmerilado

  • Estoy reuniendo cosas como estas: https://github.com/swyxio/spark-joy
    Como otros recursos, hay un generador CSS gratuito basado en la especificación de diseño glassmorphism https://ui.glass/generator/, un encabezado fijo de vidrio esmerilado https://www.joshwcomeau.com/css/backdrop-filter/, glassy glassmorphism en codepen y in context

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

  • Está realmente muy bien hecho. Siempre me sorprende que la computación gráfica no sea “un truco raro”, sino más bien 5 trucos apilados en capas
    Hacer que además sea compatible entre navegadores es un desafío adicional. Me da curiosidad si tienen una idea de qué parte consume más recursos. Pensándolo de forma simple, parecería ser backdrop-filter

    • Sí, no pensé que la implementación fuera a requerir tantos trucos
      Tu intuición es correcta: la parte que más recursos consume es el desenfoque de backdrop-filter. Cuanto mayor es el valor de blur, más píxeles vecinos hay que “consultar” antes de renderizar
      Otro elemento costoso es que hay que redibujar constantemente cuando haces scroll o cuando un fondo de video cambia el aspecto del vidrio
    • A veces incluso para “centrar” algo hacen falta 5 capas de trucos

  • Parece usar una técnica similar a mi implementación de vidrio: https://news.ycombinator.com/item?id=42225481
    En particular, se parece en el uso excesivo de box-shadow

    • El proyecto se ve genial. Me alegra no ser la única persona que se mete con 5 capas o más de sombras. En especial, la adición de Light Rays me parece impresionante

  • Un pequeño problema: la sombra entre la parte superior y el área desplazable donde están los toggles/el código desaparece al hacer scroll hacia abajo. Probablemente debería estar oculta al principio y luego aparecer

    • Bien visto. No es un problema de fade-in, sino que la sombra simplemente se desplaza fuera de la pantalla
      Esos box-shadow “sobresalientes” estaban diseñados para aplicarse dentro del elemento, no para proyectarse hacia abajo desde algún elemento, y en este caso me di cuenta de que hay que aplicar la sombra de la segunda forma

  • En mi teléfono, el desplazamiento del contenido es bastante lento. Me pregunto si hay algún otro efecto de scroll que lo haga lento a propósito, o si es un efecto secundario del efecto de vidrio

    • Interesante, pero no hay efectos de scroll en ninguna parte de la página. Me gustaría saber qué dispositivo, navegador y nivel de conexión a internet estás usando
    • En un M4 con 128 GB de RAM funciona bien

  • Puede que se me haya pasado, pero en móvil sería mucho más útil poder ocultar o contraer la caja
    Ahora ocupa toda la pantalla, así que casi no se puede ver el efecto de atrás. Aun así me interesa y pienso volver a probarlo más tarde en una pantalla más grande, pero una opción para ocultar la caja lo haría mucho mejor

    • Me pregunto si te refieres al área de vista previa del código
      En la primera implementación puse un pequeño rectángulo de demostración encima de la UI del generador, pero incluso algo pequeño ocupaba demasiado espacio y dificultaba usar la UI. Si hacía que toda la página pudiera desplazarse, la gente se frustraba porque no era evidente que había que estar al principio del scroll para ver el rectángulo que estaban editando
      Esta herramienta es principalmente para programar, así que estoy priorizando la experiencia de escritorio, y en móvil la estoy dejando más como una vista previa rápida y una prueba de que también funciona en mobile. Aun así, si conocen una UI similar que funcione realmente bien en móvil, me gustaría ver el enlace