مولّد Glassmorphism

جميع الأدوات

أنشئ بطاقات واجهة بزجاج مصنفر مع تمويه خلفي وشفافية وحدود، ثم انسخ كود CSS.

معاينة

بطاقة زجاجية

زجاج مصنفر يطفو فوق خلفية زاهية.

الخلفية
ناتج CSS
—

يُخرج كلًّا من backdrop-filter و -webkit-backdrop-filter. ملاحظة: خاصية backdrop-filter غير مدعومة في المتصفحات القديمة (مثل Firefox أقدم من 103)؛ أضف خلفية احتياطية صلبة لتلك المتصفحات.

px
%
px
تعبئة الزجاج
20%
الحدود
30%
إعدادات الجودة الجاهزة

حول مولّد Glassmorphism

مولّد Glassmorphism يبني تأثير البطاقة الزجاجية المصقولة: لوحة شبه شفافة تطمس كل ما خلفها. تتحكم أشرطة التمرير في طمس وتشبّع backdrop-filter، ولون صبغة الزجاج وشفافيته، ولون وشفافية الحدود، ونصف قطر الزوايا، والظل الخارجي — يُعرَض كل تغيير حياً فوق خلفية زاهية بحيث يمكنك الحكم على التأثير بواقعية.

أربعة إعدادات جودة مسبقة — subtle وfrosted وvivid وdark glass — تمنحك مجموعات مجرَّبة للبدء منها. يُظهر الإعداد المظلم كيف تتكيف نفس الوصفة مع واجهات الوضع الداكن، حيث تقوم حدود ضوئية خافتة بمعظم عمل فصل الزجاج عن الخلفية.

يتضمن CSS المُولَّد كلاً من backdrop-filter وبادئة -webkit-backdrop-filter التي يتطلبها Safari. لاحظ تحذير التوافق: المتصفحات القديمة (مثلاً Firefox قبل الإصدار 103) لا تدعم backdrop-filter، لذا وفّر خلفية احتياطية صلبة لها.

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

  1. ابدأ من إعداد مسبق — subtle أو frosted أو vivid أو dark glass — أو من الإعدادات الافتراضية.
  2. اضبط طمس وتشبّع مرشح الخلفية.
  3. اضبط لون صبغة الزجاج وشفافيته.
  4. اضبط لون الحدود وشفافيتها ونصف قطر الزوايا وظل الإطار.
  5. انسخ CSS — يتضمن بالفعل الخاصية بالبادئة -webkit- لأجل Safari.

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

تحصل اللوحة على لون خلفية شبه شفاف، وتطمس backdrop-filter: blur() كل ما يُعرَض خلفها. تحافظ زيادة التشبّع على حيوية الألوان المطموسة، وتُبرز حدود شبه معتمة خفيفة حافة الزجاج.

يحتاج backdrop-filter إلى خلفية شبه شفافة على العنصر ودعم من المتصفح — فعّله Firefox فقط بدءاً من الإصدار 103. يحتاج Safari بادئة -webkit-backdrop-filter، التي يتضمنها CSS المُولَّد بالفعل. عرّف دائماً خلفية احتياطية صلبة.

إدارة التباين. زد الطمس أو قلّل الشفافية حتى يجتاز النص إرشادات التباين مقابل أكثر خلفية ازدحاماً ممكنة، وأضف الحدود حتى تبقى حافة البطاقة مرئية فوق المناطق الفاتحة والداكنة معاً.

إنه أحد تأثيرات CSS الأكثر تكلفة، إذ يعيد المتصفح طمس الخلفية مع تحرك المحتوى. استخدمه على بضعة أسطح رئيسية بدلاً من عشرات البطاقات المكدّسة، واختبر التمرير على أجهزة جوال متوسطة المدى.

نعم، مجاني بالكامل ويعمل في المتصفح — عدّل أشرطة التمرير وانسخ CSS دون حساب ودون رفع.
شارك هذا
أدوات ذات صلة
منشئ توقيع البريد الإلكتروني صمّم توقيع بريد إلكتروني HTML احترافيًا من 30 قالبًا، وخصّصه واحفظه. مجاني
تحويل أيقونة إلى PNG حوّل Bootstrap Icons وFont Awesome وغيرها إلى صور PNG مخصصة — مجاناً في متصفحك. مجاني
مولّد أيقونات التطبيقات ولّد مجموعة أيقونات تطبيق كاملة وجاهزة للمتجر لأجل App Store وGoogle Play — خلفيات تدرّج وmesh وأنماط فاخرة، مبنية من شعارك. مجاني
مولّد Favicon أنشئ حزمة favicon كاملة من شعار أو أيقونة خطية أو حروف مختصرة — favicon.ico وصور PNG حديثة وأيقونة Apple touch وأيقونات PWA وبيان ويب ومقتطف HTML. مجاني
منشئ CSS Box Shadow صمّم ظلال CSS متعددة الطبقات بمتزلقات مباشرة للإزاحة والتمويه والانتشار واللون والعتامة والإدراج — مع معاينة على عنصر حقيقي ونسخ CSS جاهز للصق فورًا. مجاني
مولّد CSS Border Radius صمّم خاصية border-radius في CSS بصريًا مع معاينة حية وانسخ كودًا جاهزًا للإنتاج. مجاني
عمليات البحث الشائعة
مولّد glassmorphism css مولّد css glassmorphism تأثير زجاج مصنفر css backdrop-filter blur css مولّد بطاقات زجاجية css صانع تأثير زجاجي css مولّد خلفيات glassmorphism مولّد بطاقات تمويه css
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.
الإبلاغ عن مشكلة

أضف هذه الأداة المجانية إلى موقعك الخاص — انسخ والصق الكود أدناه.