مولّد Glassmorphism

ما هو مولّد glassmorphism / neumorphism؟

*Glassmorphism* و *neumorphism* أسلوبان لأسطح CSS تراهما في كل مكان في تصميم الويب الحديث. **الزجاج** هو مظهر الزجاج المضبّب — بطاقة شفافة تُبهت ما وراءها، توضع عادةً على متدرّج ملوّن أو صورة. **Neumorphism** هو المظهر البلاستيكي الناعم — بطاقة تبدو ناتئة (أو غائرة) من السطح بفضل ظلال فاتحة وداكنة من نفس درجة الخلفية.

كلا التأثيرين CSS صرف — لا صور ولا JavaScript ولا مكتبات. يعتمد الزجاج على backdrop-filter: blur() مع تعبئة شفافة وإطار رقيق. يُبنى neumorphism من ظلَّين بـ box-shadow: واحد أغمق قليلاً من السطح، والآخر أفتح قليلاً، بإزاحة عكسية. الرياضيات قصيرة، لكن ضبط القيم يدوياً حتى يستقرّ كل شيء يستغرق وقتاً. المولّد يتخطّى هذه الخطوة.

تمنحك هذه الأداة أشرطة تمرير لكل معامل مهم، ولوحة معاينة على خلفية قابلة للضبط (كي يكون عند الزجاج ما ينكسر عليه)، ونسخ CSS بنقرة واحدة. كل شيء يجري داخل متصفحك — ألصق المقطع مباشرةً في ورقة الأنماط.

ما ستتعلّمه أثناء اللعب بهذه الأسطح

• backdrop-filter هو ما يجعل glassmorphism حيّاً — يُبهت ويُشبع ما هو *خلف* العنصر، لا العنصر نفسه.
• يحتاج الزجاج إلى تعبئة شفافة (rgba(...) بشفافية منخفضة) وحد فاتح رقيق ليبدو مادةً مضبّبة حقيقية؛ بدون أحدهما ينهار التأثير.
• يستعمل neumorphism **اثنين** من box-shadow لا واحداً: ظل داكن أسفل-يمين وومضة فاتحة أعلى-يسار، كلاهما من تدرّج السطح لا من الأسود/الأبيض الصرف.

كيف تولّد سطح زجاج أو neumorphism خطوة بخطوة

1. 1

   اختر وضع الأسلوب

   بدّل بين **زجاج** و **Neumorphism** في الأعلى. الزجاج يحتاج خلفية؛ بينما يجلس neumorphism على لون سطح مسطّح تتحكم به.

2. 2

   اضبط المعاملات الأساسية

   في الزجاج، الأذرع الكبرى: *Blur* (مقدار تشويش الخلفية)، *شفافية الخلفية* (مدى شفافية البطاقة)، *Tint* (لمسة لونية خفيفة). في neumorphism، الأذرع الكبرى: *المسافة* (مقدار إزاحة الظلال)، *Blur* (نعومتها)، و*الكثافة* (كم تنحرف الظلال الفاتحة/الداكنة عن السطح).

3. 3

   اختر خلفية أو لون سطح

   يظهر الزجاج بأحسن صورة فوق متدرّج صريح أو صورة. ويظهر neumorphism بأحسنه فوق ألوان ناعمة قريبة من الحياد (#e0e5ec هو الرمادي النيومورفي الكلاسيكي). يقدّم لك المولّد صفّ إعدادات مسبقة قابلة للنقر.

4. 4

   بدّل أسلوب neumorphism

   ثلاثة أنماط: **Raised** (ناتئ)، **Flat** (نفس الظلال دون تدرّج)، و **Inset** (مضغوط). جرّبها كلها — رياضيات الظلال نفسها، يتغيّر الاتجاه فقط.

5. 5

   انسخ الـ CSS

   اضغط **انسخ** وألصق المقطع في ورقة الأنماط. المخرج جاهز للإنتاج: يشمل -webkit-backdrop-filter لمتصفح Safari القديم، ترتيب الخصائص، وborder-radius المتوافق، فيعمل كصنف واحد.

زجاج و neumorphism — مرجع سريع

الخصائص التي يعتمد عليها كل تأثير فعلاً. المرجع الكامل: MDN — backdrop-filter و box-shadow.

أمثلة أسطح للتجربة

background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow:  16px 16px 32px #b8bcc1,  -16px -16px 32px #ffffff;

background: #e0e5ec;border-radius: 24px;box-shadow:  inset 8px 8px 16px #b8bcc1,  inset -8px -8px 16px #ffffff;

أخطاء شائعة في الزجاج / neumorphism

• نسيان -webkit-backdrop-filter. Safari القديم (وأي WebView مدمج) يتجاهل backdrop-filter دون البادئة فيتحوّل زجاجك إلى كتلة صلبة.
• استخدام الأسود والأبيض الصرفَين لظلال neumorphism. يستعمل neumorphism الحقيقي لونَين **قريبين** من درجة السطح — الأسود/الأبيض يجعلان البطاقة تبدو رخيصة.
• وضع الزجاج فوق أبيض ساطع. لا لون خلف البلر، فيختفي التأثير ويبقى صندوق بطُبعة خفيفة. الزجاج يحتاج خلفية نابضة.

الأسئلة الشائعة — مولّد Glassmorphism