منشئ تأثير الزجاج Glassmorphism
جديدصمّم بطاقة زجاجية ضبابية وانسخ شيفرة CSS، مع معاينة مباشرة.
Browser support. backdrop-filter works in all current browsers; the copied CSS includes the -webkit- prefix for Safari. Unsupported browsers fall back to the plain translucent background.
Readability. Transparency changes contrast over busy backgrounds. Raise the tint opacity and aim for a 4.5:1 text-contrast ratio so content stays legible.
Runs entirely in your browser. Nothing is uploaded.
صمّم تأثير الزجاج المصنفر دون كتابة CSS يدوياً
يتيح لك هذا مولّد Glassmorphism بناء مظهر الزجاج المصنفر بشكل مرئي — اسحب المؤشرات للتحكم في التمويه والشفافية واللون والتشبع والحدود والظل، وشاهد البطاقة الزجاجية تستجيب فوراً. حين يعجبك الشكل، انسخ كود CSS الجاهز (مع بادئة -webkit- لدعم Safari) أو فئات Tailwind المكافئة أو مقتطف HTML جاهز للصق. لا حاجة للتخمين في قيم backdrop-filter ولا تثبيت أي شيء — كل شيء يعمل في متصفحك.
Glassmorphism هو أسلوب واجهة المستخدم الشفاف بمظهر الزجاج المصنفر الذي اشتهر في نظام macOS وWindows 11 ولوحات التحكم الحديثة. يضيف عمقاً وأناقة للبطاقات والنوافذ المنبثقة وأشرطة التنقل ونماذج تسجيل الدخول مع إبقاء الخلفية الملوّنة مرئيةً من خلال السطح. الوصول إلى القيم الصحيحة يدوياً يعني دورات متكررة من الحفظ والتحديث؛ هذه الأداة تُريحك من كل ذلك.
كيف يعمل تأثير الزجاج المصنفر
ثلاثة خصائص CSS تصنع التأثير. خلفية شبه شفافة مثل rgba(255,255,255,0.18) تُظهر المحتوى خلفها. تمويه الخلفية — backdrop-filter: blur(10px) — يُضبّب ما يقع خلف العنصر لا محتواه. وحدود خفيفة مثل 1px solid rgba(255,255,255,0.3) تلتقط الضوء على الحافة. أضف box-shadow ناعماً وborder-radius سخياً وسيبدو العنصر كلوح زجاجي حقيقي.
التشبع مهم أيضاً: إضافة saturate(120%) إلى التمويه يُعزّز الألوان النافذة عبر الزجاج، مما يمنحه ذلك المظهر المضيء الفاخر. تُتيح هذه الأداة التحكم في كل هذه العوامل — نصف قطر التمويه ولون التلوين وشفافيته والتشبع وعرض الحدود وشفافيتها ونصف قطر الزوايا وشدة الظل — حتى تضبط كود CSS الزجاج المصنفر بدقة دون تعديل سطر واحد من الكود.
مخرجات CSS و Tailwind جنباً إلى جنب
بدّل بين تبويبات المخرجات للحصول على التأثير بصيغة CSS عادي، أو فئات Tailwind glassmorphism، أو مقتطف HTML كامل مع <style> جاهز للصق. يتضمن مخرج CSS دائماً بادئة -webkit-backdrop-filter لدعم Safari. يستخدم مخرج Tailwind فئات ذات قيم مخصصة مثل backdrop-blur-[10px] وbg-[#ffffff]/18 وborder-[#ffffff]/30 وrounded-[16px] لتطابق المؤشرات بدقة — مناسب سواء فضّلت CSS يدوياً أو سير عمل الفئات المساعدة.
هذا الإخراج المزدوج هو أحد أبرز الفجوات في الأدوات المنافسة. Glassmorphism.com وGlass UI لا يصدّران إلا CSS عادياً، تاركَين مستخدمي Tailwind يترجمون القيم يدوياً. UtiloKit يتولى الأمرين تلقائياً، فتنسخ مباشرةً في قاعدة كودك بصرف النظر عن التقنية المستخدمة.
معاينة على خلفيتك الخاصة
يبدو الزجاج كزجاج حقيقي فقط حين يوجد شيء ملوّن خلفه، لذا تجلس المعاينة المباشرة على خلفية تتحكم فيها أنت. اختر من بين إعدادات مسبقة متدرجة — غروب الشمس، المحيط، الشفق القطبي، الألوان الزاهية، ومشهد داكن — أو حمّل صورتك الخاصة لاختبار الزجاج على الصورة الفعلية أو الصورة الرئيسية التي ستستخدمها. هذا ما يجعل معاينة خلفية Glassmorphism واقعية بدلاً من مجرد عينة لونية مسطحة، ويتيح لك التحقق من تباين النص في أكثر أجزاء المشهد ازدحاماً بالألوان.
رفع الخلفية المخصصة ميزة تفتقر إليها glassmorphism.com بوضوح. حين تصمم طبقة زجاجية فوق صورة رئيسية محددة، اختبارها على تدرج لوني عشوائي لا يمنحك قراءة موثوقة للوضوح. إسقاط صورتك الفعلية يتيح لك رصد مشكلات التباين قبل أن تصل إلى الإنتاج.
كيف تقارن UtiloKit بمولدات Glassmorphism الأخرى
معظم البدائل تعطيك مقتطف CSS أساسياً مع خلفية واحدة. Glassmorphism.com (الشهير لميشال ماليفيتش) لا يدعم Tailwind ولا رفع خلفية مخصصة ولا رابطاً قابلاً للمشاركة مع الفريق. Glass UI (glass-ui.com) محدود بالمثل — لا يُتيح التحكم في التشبع أو شدة box-shadow أو لون التلوين بشكل مستقل. دروس CSS-tricks ومقتطفات Codepen تعطيك كوداً ثابتاً تحتاج لتعديله يدوياً في كل مرة يغيّر فيها المصمم المواصفات.
UtiloKit يمنحك كل أداة تحكم على شاشة واحدة: التمويه ولون التلوين وشفافيته والتشبع وعرض الحدود وشفافيتها ونصف قطر الزوايا وbox-shadow. رابط المشاركة يُدمج كل هذه القيم في الرابط حتى تُرسل للزميل المواصفات الدقيقة. بدون حساب، بدون رفع، بدون علامة مائية — فقط انسخ وانشر.
الإعدادات المسبقة ودعم المتصفحات وسهولة القراءة
أربعة إعدادات مسبقة بنقرة واحدة — بطاقة مصنفرة، زجاج داكن، شريط تنقل، وألوان زاهية — تمنحك نقطة انطلاق قوية يمكنك تحسينها. يتضمن CSS المُولَّد دائماً بادئة -webkit-backdrop-filter، لذا يعمل التأثير عبر Chrome وEdge وFirefox وSafari، ويتدهور بأمان إلى تعبئة شفافة عادية في المتصفحات التي لا تدعمه.
لأن الشفافية تُغيّر التباين، راقب وضوح القراءة: ارفع شفافية التلوين إلى نحو 25-40%، أضف التشبع لتهدئة الخلفيات المزدحمة، واستهدف نسبة تباين نص WCAG 4.5:1. يجب أن تبدو البطاقة الزجاجية خفيفة وهوائية، لكن نصها يجب ألا يُرهق العين أبداً. إذا صعب قراءة النص في المعاينة المباشرة، فهذه إشارتك لرفع شفافية التلوين قبل النشر.
خاص وفوري ومجاني
لا تسجيل ولا تثبيت. كل قيمة تضبطها والمعاينة المباشرة وأي صورة تُسقطها تُعالَج محلياً في متصفحك — لا شيء يُرفع إلى أي خادم. شارك إعداداتك مع زميل باستخدام زر نسخ الرابط الذي يحزم جميع إعداداتك في الرابط. ضع هذا مولّد البطاقة الزجاجية في علاماتك المرجعية وارجع إليه في أي وقت تحتاج تأثير زجاج مصنفر دون عناء أداة تطلب بريدك الإلكتروني أولاً.
Frequently asked questions
ما هو Glassmorphism؟
Glassmorphism هو أسلوب واجهة مستخدم يجعل العنصر يبدو كالزجاج المصنفر — لوح شبه شفاف يُضبّب ما يقع خلفه، منتهٍ بحدود خفيفة وظل ناعم لإضفاء العمق. تراه في macOS Big Sur وأسطح Acrylic لـWindows 11 وبطاقات تسجيل الدخول الحديثة. المكونات الثلاثة هي خلفية شبه شفافة وتمويه الخلفية وحدود بعرض 1px، مثلاً: background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3).
كيف أعمل تأثير Glassmorphism في CSS؟
أعطِ العنصر خلفية شبه شفافة وتمويه خلفية، ثم أضف حدوداً خفيفة. نقطة انطلاق جيدة: background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2). المفتاح أن يكون التعبئة الخلفية شفافاً جزئياً حتى يظهر التمويه خلفه. اسحب المؤشرات أعلاه للضبط الدقيق وانسخ CSS الناتج.
ماذا يفعل backdrop-filter في CSS؟
يُطبّق backdrop-filter تأثيراً رسومياً — الأكثر شيوعاً blur() — على المنطقة خلف العنصر لا على محتواه. لذا فإن backdrop-filter: blur(10px) يُضبّب ما يُعرض خلف الصندوق مما يخلق مظهر الزجاج المصنفر. يمكنك أيضاً تسلسل المرشحات، مثلاً backdrop-filter: blur(10px) saturate(150%) لتمويه وتعزيز الألوان خلف الزجاج في آنٍ واحد. يظهر التأثير فقط إذا كانت خلفية العنصر شفافة جزئياً على الأقل.
كيف أصنع تأثير الزجاج المصنفر؟
الزجاج المصنفر هو Glassmorphism بتمويه أقوى وتلوين أكثر كثافة طفيفاً. جرّب: background: rgba(255,255,255,0.25); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(255,255,255,0.4); border-radius: 16px. ارفع التمويه إلى 14-20px وشفافية التلوين إلى نحو 20-30% حتى يبدو السطح "مصنفراً" لا شفافاً. الإعداد المسبق للبطاقة المصنفرة في UtiloKit يضع هذه القيم لك فوراً فتبدأ منها وتُعدّل.
هل backdrop-filter يعمل في جميع المتصفحات؟
نعم — backdrop-filter مدعوم في جميع المتصفحات الرئيسية الحالية (Chrome وEdge وFirefox وSafari). Safari يدعمه منذ سنوات تحت بادئة -webkit-backdrop-filter، لذا أدرج دائماً السطرين: -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px). مولّد Glassmorphism في UtiloKit يُخرج النسخة ذات البادئة تلقائياً. المتصفحات القديمة التي لا تدعمه تُظهر الخلفية الشبه شفافة العادية فحسب، وهو تدهور سلس.
لماذا لا يعمل backdrop-filter أو Glassmorphism عندي؟
الأسباب الثلاثة المعتادة: (1) لا يوجد شيء خلف العنصر للتمويه — backdrop-filter يؤثر فقط على المحتوى خلفه، فضعه فوق صورة أو تدرج لوني؛ (2) خلفية العنصر معتمة كلياً — استخدم تعبئة rgba() مثل rgba(255,255,255,0.18) حتى يظهر التمويه؛ (3) نسيت بادئة -webkit-backdrop-filter لـSafari. لاحظ أيضاً أن عنصراً سلفياً مع filter أو transform أو will-change يمكنه إنشاء كتلة تحتوية تكسر التأثير بالكامل.
كيف أستخدم Glassmorphism في Tailwind CSS؟
ادمج أدوات backdrop-blur مع خلفية شبه شفافة وحدود خافتة. مثلاً: class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-lg". استخدم backdrop-saturate-150 لتعزيز الألوان خلفه. للقيم الدقيقة، بدّل المخرج أعلاه إلى تبويب Tailwind — يُخرج فئات بقيم مخصصة مثل backdrop-blur-[10px] bg-[#ffffff]/18 border-[1px] border-[#ffffff]/30 rounded-[16px] تطابق مؤشراتك بدقة.
ما الفرق بين Glassmorphism و Neumorphism؟
Glassmorphism يستخدم الشفافية وتمويه الخلفية حتى يبدو العنصر كزجاج مصنفر يطفو فوق المحتوى. Neumorphism (الواجهة الناعمة) هو العكس تماماً: عناصر معتمة بلون الصفحة ذاتها، تُمنح مظهراً بارزاً ثلاثي الأبعاد بظلال زوجية فاتحة وداكنة — مثلاً box-shadow: 8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff. Glassmorphism يحتاج خلفية ملوّنة ليُبهر؛ Neumorphism يحتاج خلفية مسطحة أحادية اللون ليعمل.
ما مقدار التمويه المناسب لتأثير الزجاج؟
لمعظم البطاقات، يبدو تمويه الخلفية بين 8-16px مثالياً. استخدم نحو 5-8px لزجاج خفيف بالكاد مصنفر، و10-16px لبطاقة أو نافذة منبثقة عادية، و16-25px لشريط تنقل أو طبقة تغطية زجاجية ثقيلة. ارفع شفافية التلوين قليلاً مع زيادة التمويه حتى يبقى النص مقروءاً. مؤشر التمويه أعلاه يتراوح بين 0 و40px فتجد النقطة المثلى لصورة خلفيتك المحددة دون تخمين.
كيف أجعل النص مقروءاً على الزجاج؟
وضوح القراءة يأتي من التباين بين النص والخلفية المُموَّهة. ارفع شفافية التلوين إلى نحو 25-40% حتى يكون السطح أقل شفافية، أضف backdrop-saturate لتهدئة الألوان الصاخبة خلفه، واختر لون نص ذا تباين قوي — نص أبيض على زجاج مُلوَّن داكن أو نص داكن على تلوين فاتح. استهدف نسبة تباين WCAG 4.5:1 للنص الأساسي، وتجنب وضع نص صغير فوق أكثر أجزاء الصورة ازدحاماً بالألوان.
هل Glassmorphism مناسب للوصولية؟
يمكن أن يكون، لكنه يحتاج عناية. الشفافية تجعل التباين غير متوقع لأن اللون خلف الزجاج يتغير باستمرار، مما قد يُنزل النص دون الحد الأدنى WCAG 4.5:1. استخدم شفافية تلوين كافية (30%+)، اختبر النص في مقابل أكثر أجزاء الخلفية ازدحاماً، ولا تعتمد على التمويه وحده لفصل المحتوى. احترم أيضاً المستخدمين الذين يُفعّلون prefers-reduced-transparency بتوفير بديل أكثر كثافة في CSS.
كيف يقارن مولّد Glassmorphism في UtiloKit بـ glassmorphism.com و Glass UI؟
Glassmorphism.com (لميشال ماليفيتش) يمنحك نقطة انطلاق سريعة لأسلوب واحد، لكنه لا يتيح رفع صورة خلفية مخصصة ولا التحكم في التشبع ولا تصدير فئات Tailwind. Glass UI (glass-ui.com) محدود بالمثل — معاينة بخلفية واحدة، بدون مخرج Tailwind، بدون رابط مشاركة. UtiloKit يتيح إسقاط صورتك الخاصة وضبط كل معامل شاملاً التشبع وشدة الظل والحصول على مخرجات CSS وTailwind ومشاركة الإعداد الدقيق عبر رابط. كل شيء يعمل في المتصفح دون رفع أي شيء إلى خادم.
كيف أضيف بطاقة زجاجية إلى موقعي؟
ضع حاوية فوق صورة خلفية أو تدرج لوني، ثم طبّق CSS المُولَّد على البطاقة. مثال مبسّط: أعطِ العنصر الأب خلفية، ثم نسّق العنصر الابن بـ background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 24px. انسخ مقتطف HTML الجاهز من المخرج أعلاه — يتضمن التوسيم وكتلة style يمكنك لصقها مباشرةً في صفحتك دون أي إعداد إضافي.
هل يمكنني استخدام مولّد Glassmorphism على iPhone أو Android؟
نعم. مولّد Glassmorphism في UtiloKit متجاوب بالكامل مع الأجهزة المحمولة ويعمل في Safari على iPhone وChrome على Android وأي متصفح محمول حديث. المؤشرات تدعم اللمس، المعاينة المباشرة تتحدث في الوقت الفعلي، ونسخ مخرج CSS أو Tailwind يعمل من حافظة هاتفك تماماً كما على سطح المكتب. بما أن كل شيء يعمل في المتصفح دون خادم، لا شيء تثبته — فقط افتح الصفحة وابدأ التصميم.
هل أستطيع مشاركة إعدادات Glassmorphism مع زميل؟
نعم — انقر زر نسخ الرابط وستُشفَّر جميع قيم المؤشرات مباشرةً في الرابط. أرسل ذلك الرابط لمصمم أو مطور وسيفتح إعدادك الدقيق: نفس التمويه، نفس لون التلوين وشفافيته، نفس التشبع، نفس إعدادات الحدود والظل. لا حاجة لحساب ولا ملف للتصدير. هذا أحد المجالات التي تقصر فيها glassmorphism.com وGlass UI — كلاهما لا يدعم روابط إعدادات قابلة للمشاركة.
Related tools
عرض كل الأدوات
جديد مدقّق تباين الألوان
تحقّق من نِسب تباين WCAG من مستوى AA/AAA بين لون النص والخلفية.
جديد منشئ تدرّجات CSS
أنشئ تدرّجات CSS خطية وشعاعية ومخروطية مع معاينة مباشرة.
جديد منشئ ظلال الصناديق CSS
أنشئ ظلال صناديق CSS متعددة الطبقات بإعدادات جاهزة ومعاينة مباشرة. انسخ شيفرة CSS أو القيمة أو نمط React فورًا.
جديد منشئ لوحات الألوان
أنشئ لوحات ألوان متكاملة ومتجاورة وثلاثية وأحادية اللون.
جديد منشئ منحنى Cubic Bezier
صمّم منحنى تسارع CSS بسحب نقاط التحكم، مع معاينة مباشرة.
جديد منشئ استدارة الحواف
صمّم زوايا CSS مستديرة وأشكالًا عضوية انسيابية بصريًا.