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

Frosted Film

Una capa translúcida y difusa que deja ver color sin convertirse en vidrio claro.

Estado: ListoFf
Ff

Usos

  • Navegación fija
  • Overlays
  • Paneles móviles

Parámetros

  • blur
  • tint
  • grain
  • border alpha
  • contrast

Prompt IA

Usa una película translúcida esmerilada sobre un fondo colorido pero suave, con bordes difusos, grano fino y texto legible.

Notas Tailwind

Usa backdrop-blur-md, bg-white/10 o bg-black/15, borde de baja opacidad y grano sutil.

Rendimiento

Prefiere valores medios de blur y prueba capas grandes en móviles antiguos.

CSS

.frosted-film {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    rgba(20, 26, 28, 0.42);
  backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}

Ejemplo React

export function FrostedFilmPanel({ children }) {
  return <section className="frosted-film">{children}</section>;
}