مولّد تأثير الزجاج بلغة CSS
صمّم تأثير الزجاج (glassmorphism) بمعاينة حيّة — اضبط التمويه والشفافية ولون الزجاج والحدود، ثم انسخ كود CSS.
670 مشاهدة
ما هو الغلاسمورفيزم (Glassmorphism)؟
الغلاسمورفيزم هو مظهر الزجاج المصنفر: لوحة شبه شفافة تُموّه ما خلفها باستخدام backdrop-filter: blur()، مع حدّ رفيع وظل خفيف. يعمل بأفضل شكل فوق خلفيات ملوّنة أو صور — على خلفية بلون واحد يصبح التمويه غير مرئي.
حرّك أشرطة التمرير وشاهد المعاينة الحيّة؛ يتحدّث كود CSS أدناه فورًا ويكون جاهزًا للنسخ. تذكّر بادئة -webkit-backdrop-filter اللازمة لمتصفح Safari، وهي مُضمَّنة بالفعل في الكود المُولَّد.
الأسئلة الشائعة
لماذا يبدو تأثير الزجاج لديّ مسطحًا؟
يظهر backdrop-filter فقط فوق خلفية متغيّرة — ضع العنصر فوق تدرّج لوني أو صورة. تحقّق أيضًا من دعم المتصفح: يحتاج Safari إلى بادئة -webkit- (مُضمَّنة في الكود المُولَّد).
هل يؤثر backdrop-filter على الأداء؟
التمويه مُسرَّع بواسطة معالج الرسوميات (GPU) لكنه ليس بلا تكلفة. استخدمه في عدد قليل من الأسطح الرئيسية (البطاقات، الرؤوس) بدلًا من عشرات العناصر، وأبقِ نصف قطر التمويه معتدلًا على الجوّال.
ما القيم التي تمنح مظهر زجاج كلاسيكيًا؟
نقطة انطلاق جيدة: خلفية بيضاء بشفافية 15-25%، تمويه 8-12 بكسل، حدّ بسمك 1 بكسل بلون أبيض 30%، ونصف قطر 16 بكسل — وهي القيم الافتراضية لهذا المولّد.
أدوات مشابهة
الإبلاغ عن مشكلة
مولّد تأثير الزجاج بلغة CSS