مولد تأثير الزجاج CSS — مجاني على الإنترنت
ولّد تأثيرات الزجاج المضبب مع معاينة مباشرة. اضبط التمويه والشفافية والحدود ولون الخلفية.
Who uses the مولد تأثير الزجاج CSS?
- مطوّرو الواجهة الذين ينفذون مكونات بطاقات زجاج مصنفر لواجهات ويب حديثة.
- المصممون الذين ينشئون نماذج أولية للغلاسمورفيزم تتماشى مع جماليات macOS وWindows 11 الحالية.
- متعلمو الواجهة الأمامية الذين يستكشفون CSS backdrop-filter وتأثيرات الشفافية الحديثة.
How the مولد تأثير الزجاج CSS works
اضبط لون الصبغة والشفافية لتحديد لون خلفية الزجاج وشفافيته.
اضبط شدة التمويه (backdrop-filter: blur) للحصول على تأثير عمق الزجاج المصنفر.
اضبط نصف قطر الحدود وشفافية الحدود لتحديد نمط الحواف.
انسخ كود CSS الكامل، الذي يتضمن الإصدار ببادئة -webkit- للتوافق مع Safari.
Tips & tricks
- الظل (box-shadow) في CSS المُنشأ ثابت (ظل محيطي ناعم) — لا يمكن ضبطه عبر أشرطة التمرير، فقط الصبغة والتمويه ونصف قطر الحدود وشفافية الحدود قابلة للضبط.
- قيم الشفافية الأعلى (الأقرب للحد الأقصى) تجعل تأثير الزجاج أكثر دقة؛ والقيم الأقل تجعل البطاقة تبدو أكثر صلابة.
- عاين دائمًا عنصر الزجاج فوق الخلفية الفعلية التي سيوضع عليها — يبدو التأثير مختلفًا جدًا على صورة مقارنة بلون مسطح.
- انسخ كلًا من سطري backdrop-filter وwebkit-backdrop-filter- — يحتاج Safari تحديدًا إلى النسخة ذات البادئة.
Frequently Asked Questions
ما هو الغلاسمورفيزم (glassmorphism)؟
الغلاسمورفيزم هو اتجاه في تصميم واجهات المستخدم (انتشر حوالي عام 2020) يستخدم عناصر شبيهة بالزجاج المصنفر: خلفيات شبه شفافة، وتمويه خلفية، وحدود رقيقة لخلق العمق والتراكب. اشتُهر بفضل macOS Big Sur من Apple وWindows 11.
ما خاصية CSS التي تُنشئ تأثير تمويه الزجاج المصنفر؟
تُطبّق backdrop-filter: blur(10px) تمويهًا على كل ما هو خلف العنصر. مدمجة مع background-color شبه شفاف وحدود فاتحة، تُنشئ تأثير الزجاج — وهو بالضبط ما تتحكم به أشرطة التمرير في هذه الأداة.
هل تعمل backdrop-filter في جميع المتصفحات؟
backdrop-filter مدعومة في Chrome وEdge وSafari (ببادئة -webkit-). أضاف Firefox الدعم في الإصدار 103. يتضمن ناتج هذه الأداة دائمًا كلًا من backdrop-filter وwebkit-backdrop-filter- لأقصى قدر من التوافق.
ما الخلفية المطلوبة خلف عنصر غلاسمورفيزم؟
لا يبدو الغلاسمورفيزم جيدًا إلا فوق خلفية ملونة أو ضبابية أو متدرجة — فهو يحتاج إلى شيء ليُموّهه. على خلفية بيضاء أو صلبة، يكون تأثير التمويه غير مرئي. تستخدم معاينة هذه الأداة مشهدًا متدرجًا لتوضيح ذلك.
هل الغلاسمورفيزم متاح لذوي الإعاقة (accessible)؟
قد يواجه الغلاسمورفيزم مشكلات في التباين — قد لا يستوفي النص على الزجاج الشفاف فوق خلفيات متنوعة متطلبات تباين WCAG. اختبر دائمًا مع صورة الخلفية الفعلية وتأكد من أن النص يستوفي نسبة تباين 4.5:1.
Is my data safe when using the مولد تأثير الزجاج CSS?
Completely safe. The مولد تأثير الزجاج CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the مولد تأثير الزجاج CSS output in commercial projects?
Yes. The مولد تأثير الزجاج CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the مولد تأثير الزجاج CSS follow official standards?
Yes. The مولد تأثير الزجاج CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.