VmVibe Materials
EN中文ESHIAR
Back to map
Digital / Web UI

Frosted Film

A calm, diffused translucent layer that reveals color underneath without turning into clear glass.

Status: ReadyFf
Ff

Usage

  • Sticky navigation
  • Drawer overlays
  • Mobile sheets

Adjustable parameters

  • blur
  • tint
  • grain
  • border alpha
  • contrast

AI Prompt

Use a frosted translucent film over a colorful but muted background. Keep the film low contrast, with diffused edges, soft grain, and readable foreground text.

Tailwind notes

Use backdrop-blur-md, bg-white/10 or bg-black/15, a low-alpha border, and a subtle grain overlay.

Performance notes

Prefer medium blur values. Large full-screen frosted layers should be tested on older phones.

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);
}

React example

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