VmVibe Materials
EN中文ESHIAR
العودة إلى الخريطة
Digital / Web UI

Liquid Glass

سطح زجاجي شفاف مع انكسار ناعم، blur خفيف، حواف مضيئة وعمق بسيط.

الحالة: جاهزLg
Lg

الاستخدامات

  • بطاقات رئيسية
  • ودجات عائمة
  • لوحات تنقل

المعاملات

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

AI Prompt

أنشئ بطاقة زجاج سائل شفافة مع blur خلفي ناعم، انكسار خفيف، حواف مضيئة، ظل داخلي وطبقة noise دقيقة. اجعل النص واضحا.

ملاحظات Tailwind

اجمع backdrop-blur وخلفية شفافة وحدود فاتحة وظلال متعددة و pseudo-element لإضاءة الحافة.

ملاحظات الأداء

قد يكون backdrop-filter ثقيلا على الهاتف. استخدمه على أسطح قليلة ومهمة.

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

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