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

Liquid Glass

Soft blur, bright edges और हल्की depth वाली translucent refractive glass surface.

Status: ReadyLg
Lg

Usage

  • Hero cards
  • Floating widgets
  • Navigation panels

Parameters

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

AI Prompt

Soft backdrop blur, subtle refraction, bright rim highlights, inner shadow और faint noise वाली translucent liquid glass card बनाएं. Text crisp रहे.

Tailwind notes

backdrop-blur, translucent background, light border, layered shadows और rim-light pseudo-element मिलाएं.

Performance notes

Mobile पर backdrop-filter भारी हो सकता है. इसे कुछ key surfaces पर ही रखें.

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

React example

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