مولّد تأثير الزجاجية CSS
أنشئ بطاقات زجاجية مع معاينة مباشرة.
اضبط الضبابية وشفافية التلوين وحواف الحدود لبطاقتك الزجاجية، شاهدها مباشرة على خلفية ملوّنة، ثم انسخ CSS الكامل.
لون الخلفية
تلوين الزجاج
12px
25%
20px
50%
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.50); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
كيفية إنشاء تأثير الزجاجية
- اختر لون خلفية خلف البطاقة الزجاجية.
- اختر لون التلوين واضبط شفافيته.
- عدّل الضبابية وشفافية الحدود والحواف بالمنزلقات.
- انسخ CSS الناتج إلى مشروعك.
الأسئلة الشائعة
ما هو تأثير الزجاجية؟
أسلوب واجهة يحاكي الزجاج المصنفر: لوحة شفافة فوق خلفية ملوّنة، تُنعّم بضبابية الخلفية.
لماذا يوجد خاصيتا ضبابية في CSS؟
الخاصية ذات البادئة webkit تُبقي التأثير يعمل في Safari وغيرها من المتصفحات التي تحتاجها.
هل يعمل backdrop-filter في كل المتصفحات؟
تدعمه جميع المتصفحات الحديثة. المتصفحات القديمة جدًا تعرض لوحة شفافة عادية بلا ضبابية.