مولّد Glassmorphism
ينشئ مولد Glassmorphism تأثير الزجاج المصنفر باستخدام backdrop-filter في CSS، ويتيح لك ضبط التمويه وشفافية الخلفية والتشبع وشفافية الحدود ونصف القطر ولون الصبغة مع معاينة مباشرة.
حول هذه الأداة
ينشئ مولد Glassmorphism تأثير الزجاج المصنفر باستخدام backdrop-filter في CSS، ويتيح لك ضبط التمويه وشفافية الخلفية والتشبع وشفافية الحدود ونصف القطر ولون الصبغة مع معاينة مباشرة.
طريقة الاستخدام
- اختر لون صبغة الزجاج.
- اضبط التمويه والشفافية والتشبع.
- حدد شفافية الحدود ونصف قطر الزوايا.
- انقر Copy CSS.
معلومات مفيدة
- يستخدم التأثير backdrop-filter: blur() saturate()، الذي يموّه كل ما يقع خلف العنصر.
- تلزم خلفية شبه شفافة (rgba)، وإلا فسيختفي التمويه.
- يتضمن كود CSS الناتج البادئة -webkit-backdrop-filter لمتصفح Safari.
- يظهر تأثير الزجاج بأفضل شكل فوق الخلفيات الملونة أو المصورة، أما فوق الألوان المسطحة فلا يظهر التمويه.
- راقب تباين النص — فقد تنخفض الألواح الشفافة عن حد التباين في WCAG فوق الخلفيات المزدحمة.
تعمل بالكامل داخل متصفحك — لا يتم رفع أو حفظ أي شيء تُدخله.
الأسئلة الشائعة
كيف أنشئ تأثير الزجاج في CSS؟
امنح العنصر خلفية شبه شفافة، مثل rgba(255,255,255,0.15)، وbackdrop-filter: blur(12px); وتكتب لك هذه الأداة القاعدة كاملة.
لماذا لا يعمل backdrop-filter لديّ؟
يحتاج العنصر إلى خلفية شفافة أو شبه شفافة، ويجب أن يوجد خلفه شيء يُموَّه. كما يحتاج Safari إلى البادئة -webkit-.
هل Glassmorphism مناسب لإمكانية الوصول؟
يمكن أن يكون كذلك إذا حافظ النص على تباين كافٍ. اختبر ألوان النص فوق أكثر أجزاء الخلفية ازدحامًا.
هل يؤثر backdrop-filter على الأداء؟
التمويه يستهلك معالج الرسومات بكثافة، لذا تجنب تطبيقه على مساحات كبيرة جدًا أو على عناصر كثيرة معًا، خاصة على الهواتف الضعيفة.