مولّد Glassmorphism CSS

ما هو مولّد Glassmorphism؟

ينشئ تأثير الزجاج المصنفر (glassmorphism): لوحة شفافة مظللة تموّه وتزيد إشباع ما خلفها، مع حد فاتح وظل ناعم اختياريين. تضع المعاينة البطاقة فوق خلفيات ملونة لتقييم التأثير.

كيفية استخدام مولّد Glassmorphism

1. اختر إعداداً مسبقاً: Frosted أو Dark glass أو Tinted أو Subtle.
2. اضبط التمويه وإشباع الخلفية.
3. اختر لون التظليل وشفافيته وشفافية الحد ونصف القطر.
4. بدّل الظل وجرّب خلفيات مختلفة ضمن إعدادات المعاينة.
5. انسخ كود CSS.

مثال

Frosted preset (blur 10px, saturation 180%, white at 0.25, border 0.3, radius 16px, shadow on)

background: rgba(255, 255, 255, 0.25);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);

متى تستخدم مولّد Glassmorphism

استخدمه للبطاقات وأشرطة التنقل والنوافذ المنبثقة الموضوعة فوق صور أو تدرجات ملونة. لا يظهر التأثير إلا إذا كان خلف العنصر شيء مرئي؛ وفوق لون مصمت يبدو كصندوق شفاف عادي. تحقق من تباين النص لأن الخلفية خلف الزجاج تتغير.

كيف يعمل مولّد Glassmorphism

خلفية اللوحة هي لون التظليل بالشفافية المختارة (rgba())، ويستخدم الحد اللون نفسه بشفافية الحد. يذهب التمويه والإشباع إلى backdrop-filter: blur(px) saturate(%)؛ ويُحذف saturate(100%) لأنه لا يغيّر شيئاً. يُكتب التصريح مرتين، أولاً مع البادئة -webkit- التي ما زال Safari يحتاجها ثم بدونها. وإذا كان التمويه 0 والإشباع 100% فلا يُكتب backdrop-filter إطلاقاً.

حالات الاستخدام الشائعة

• ✓ أشرطة تنقل مصنفرة فوق صور الواجهة الرئيسية
• ✓ بطاقات زجاجية على خلفيات mesh gradient
• ✓ نوافذ منبثقة تُبقي السياق ظاهراً
• ✓ ودجات الموسيقى أو الطقس
• ✓ طبقات زجاجية داكنة لأدوات تحكم الفيديو

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

استكشف المزيد من الفئات