VmVibe Materials
EN中文ESHIAR
Map पर वापस
Digital / Web UI

Frosted Film

एक calm diffused translucent layer, जो नीचे का color दिखाती है पर clear glass नहीं बनती.

Status: ReadyFf
Ff

Usage

  • Sticky nav
  • Drawer overlays
  • Mobile sheets

Parameters

  • blur
  • tint
  • grain
  • border alpha
  • contrast

AI Prompt

Muted colorful background पर frosted translucent film रखें, diffused edges, soft grain और readable text के साथ.

Tailwind notes

backdrop-blur-md, bg-white/10 या bg-black/15, low-alpha border और subtle grain overlay उपयोग करें.

Performance notes

Medium blur values बेहतर हैं. Full-screen frosted layers को older phones पर test करें.

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