تصميم / CSS

مولّد Glassmorphism لـ CSS (تأثير الزجاج الضبابي)

أنشئ مظهر الزجاج الضبابي باستخدام CSS وbackdrop-filter: اضبط التمويه، ولون الصبغة، والشفافية، والتشبّع، والحدود، ونصف قطر الزوايا فوق معاينة ملوّنة، ثم انسخ CSS يعمل في كل متصفح حالي.

مولّد Glassmorphism لـ CSS (تأثير الزجاج الضبابي): تعمل backdrop-filter: blur() على تمويه كل ما يقع خلف العنصر، بينما تجعل saturate() تلك الألوان أكثر غنى. تضفي الخلفية شبه الشفافة لونًا على الزجاج، وتبرز حافة ضوء خافتة الطرف، كما يحدث في الزجاج الحقيقي. ويغطي السطر الذي يحتوي على السابقة -webkit- إصدارات Safari الأقدم من الإصدار 18. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.

الفئة
أدوات المطورين
مرات التشغيل
في المتصفح
التكلفة
مجاني · بلا تسجيل
التوفر
جاهز للاستخدام
مولّد تأثير الزجاجمعالجة محلية

تعمل بالكامل في المتصفح

زجاج مصنفرالألوان خلف هذه البطاقة ضبابية.

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

يحتاج هذا التأثير إلى شيء ملوّن خلف العنصر: إذ تعمل backdrop-filter على تمويه ما يوجد أسفله، وتسمح الخلفية شبه الشفافة بظهوره. سطر -webkit- مخصّص لـ Safari قبل الإصدار 18. تأكد من احتفاظ النص على الزجاج بتباين كافٍ فوق كل جزء من الخلفية.

إمكانية الوصول

يفعّل بعض المستخدمين تقليل الشفافية من إعدادات النظام. ويمكن لاستعلام الوسائط prefers-reduced-transparency، المدعوم في المتصفحات المستندة إلى Chromium، استبدال الزجاج بخلفية صلبة لهم.

إقرانه بظل

يرفع الظل الناعم والعريض البطاقة عن الخلفية؛ اضبطه باستخدام مولّد ظلال الصناديق واستبدل سطر box-shadow.

طريقة الاستخدام

  1. اضبط التمويه والشفافية والتشبّع.
  2. اختر الصبغة والحدود ونصف قطر الزوايا.
  3. انسخ CSS وضع العنصر فوق خلفية ملوّنة.

الخصوصية والقيود

تعمل كل العمليات في المتصفح.

أدوات ذات صلة

ظل الصندوقتدرج CSSأنماط CSS

الأسئلة الشائعة

لماذا يبدو الزجاج عاديًا؟

يجب أن يوجد خلفه شيء ملوّن أو مليء بالتفاصيل؛ فعند وضعه فوق لون موحّد، لا يجد التمويه شيئًا لتمويهه.

هل تكون backdrop-filter بطيئة؟

تستهلك موارد أكثر من معظم خصائص CSS، وخصوصًا عند تمرير مساحات كبيرة فوق محتوى متحرّك؛ لذلك اجعل المساحات المموّهة صغيرة وتجنّب تكديس الكثير منها.

هل النص مقروء؟

تحقّق من ذلك، إذ يتغيّر التباين مع تغيّر الخلفية. تساعد صبغة أغمق، أو شفافية أعلى، أو ظل للنص.

أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا