VmVibe Materials
EN中文ESHIAR
Volver al mapa
Digital / Web UI

Liquid Glass

Una superficie de vidrio translúcida con refracción, blur suave, bordes luminosos y un poco de profundidad.

Estado: ListoLg
Lg

Usos

  • Hero cards
  • Widgets flotantes
  • Paneles de navegación

Parámetros

  • blur
  • opacity
  • radius
  • rim highlight
  • inner shadow
  • noise

Prompt IA

Crea una tarjeta de vidrio líquido translúcido con blur de fondo, refracción sutil, borde luminoso, sombra interna y ruido fino. Mantén el texto nítido.

Notas Tailwind

Combina backdrop-blur, fondo translúcido, borde claro, sombras por capas y pseudo-elemento para el brillo del borde.

Rendimiento

Backdrop-filter puede ser costoso en móvil. Úsalo en pocas superficies clave.

CSS

.liquid-glass {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.08)),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -20px 50px rgba(255,255,255,.06),
    0 24px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(22px) saturate(1.25);
}

Ejemplo React

export function LiquidGlassCard({ children }) {
  return <div className="liquid-glass">{children}</div>;
}