مولد CSS Glassmorphism
صمم سطحًا زجاجيًا بلوريًا بشكل مرئي وانسخ CSS. اضبط التمويه وعتامة الخلفية وعتامة الحدود ونصف قطر الزاوية، وشاهد تحديث المعاينة مباشرة، واستخرج مجموعة قواعد يمكنك لصقها مباشرة في ورقة أنماط أو مكون.
Glass Card Preview
Frosted glass visual container with live CSS backdrop-filter.
Adjust Glass Parameters
/* Glassmorphism Effect */ background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 24px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
كيف يعمل
- 1
اضبط أشرطة تمرير التمويه وعتامة الخلفية والحدود ونصف القطر.
- 2
شاهد المعاينة المباشرة للحكم على التأثير من خلال خلفية حقيقية وليس بشكل مجرد.
- 3
قم بالضبط الدقيق حتى يظل السطح قابلاً للقراءة — تفشل تأثيرات الزجاج عندما ينخفض التباين كثيرًا.
- 4
انسخ ملف CSS الذي تم إنشاؤه والصقه في ورقة الأنماط أو المكون الخاص بك.
المزايا والفوائد الرئيسية
ردود فعل مرئية حية
يقوم كل شريط تمرير بتحديث المعاينة على الفور، وهو أسرع من تحرير القيم في ورقة الأنماط وإعادة التحميل.
CSS جاهز للنسخ
الإخراج هو CSS عادي مع مرشح الخلفية وقواعد الخلفية والحدود المطابقة - لا يلزم وجود إطار عمل.
يبقى التباين مرئيًا
نظرًا لأنك تضبط معاينة حقيقية، يمكنك معرفة متى يصبح النص الموجود على السطح غير قابل للقراءة.
لا خطوة البناء
تعمل القواعد في ورقة أنماط عادية، أو وحدة CSS، أو قيم Tailwind التعسفية، أو مكون مصمم.
فيما يستخدمه الناس
- تصميم بطاقة أو شكل أو شريط تنقل يطفو فوق صورة أو تدرج.
- إنشاء نموذج أولي للوحة متجمدة قبل الالتزام بها في نظام التصميم.
- مطابقة سطح زجاجي موجود بالعين عندما يكون لديك لقطة الشاشة وليس ملف CSS.
- تعليم أو توثيق كيفية تصرف مرشح الخلفية عند قيم التمويه المختلفة.
التنسيقات والخيارات المدعومة
| الإخراج | إعلانات CSS: مرشح الخلفية، الخلفية، الحدود، نصف قطر الحدود |
|---|---|
| الضوابط | نصف قطر التمويه، عتامة الخلفية، عتامة الحدود، نصف قطر الزاوية |
الخصوصية ومعالجة البيانات
كل شيء هنا يتم إنشاؤه بواسطة CSS في الصفحة من قيم شريط التمرير. لا يتم تحميل أي شيء، ولا يتم تسجيل أي شيء يتعلق بتصميمك.
الحدود والأشياء التي يجب معرفتها
- يعد مرشح الخلفية مكلفًا للمركب. يمكن أن تؤدي العديد من الأسطح غير الواضحة الكبيرة في صفحة واحدة إلى الإضرار بشكل ملحوظ بأداء التمرير على الأجهزة المنخفضة الجودة.
- يظهر التأثير فقط على المحتوى الموجود خلفه. على خلفية صلبة مسطحة، يبدو السطح الزجاجي وكأنه صندوق ملون عادي.
- تقع على عاتقك مسؤولية إمكانية الوصول: تأكد من أن النص الموجود على السطح لا يزال يلبي متطلبات التباين مقابل الجزء الأكثر ازدحامًا في الخلفية.
استكشاف الأخطاء وإصلاحها
لا يظهر التمويه في المتصفح
يحتاج عامل تصفية الخلفية إلى تثبيت العنصر فوق محتوى آخر ويتطلب خلفية غير معتمة تمامًا. تحتاج بعض المتصفحات القديمة أيضًا إلى الخاصية المسبوقة -webkit-.
من الصعب قراءة النص الموجود فوق اللوحة
زيادة عتامة الخلفية أو تغميق الصبغة. لا يضمن Blur وحده التباين عندما تكون الخلفية مشرقة ومزدحمة.
Glassmorphism CSS Generator — Frosted Glass Effect Online
Design a frosted-glass panel visually and copy the CSS. This free glassmorphism generator gives you live control over blur, transparency, border and shadow, and outputs the backdrop-filter rules that produce the effect in real browsers.
- Live visual preview — drag blur, opacity and saturation and watch the panel update instantly against a real background instead of guessing at values.
- Production-ready backdrop-filter CSS — the generated rule includes the vendor-prefixed fallback needed for Safari, so the effect does not silently vanish on iOS.
- Border and shadow control — the subtle light border and soft shadow are what sell the glass effect — both are tunable and included in the output.
- Copy straight into your stylesheet — paste the block into a CSS file, a styled component or a Tailwind arbitrary-value utility.
- Free, instant, in-browser — no account, no export credits and nothing uploaded.
Sample your background colour first with the Color Picker, then compress the finished stylesheet with the CSS Minifier.
الأسئلة المتداولة
Does the glass effect hurt performance?
It can. backdrop-filter forces the browser to re-composite what is behind the element, and several large blurred surfaces on one page can make scrolling stutter on low-end devices. Use it for a few key surfaces rather than everywhere.
Why does the blur not show up?
backdrop-filter only has an effect when there is content behind the element and the background is not fully opaque. Some older browsers also need the -webkit- prefixed property.
How do I keep text readable on glass?
Raise the background opacity or add a tint. Blur alone does not guarantee contrast, and a bright, busy backdrop will defeat it — check the text against the busiest part of the background.
هل يتم دعم مرشح الخلفية في جميع المتصفحات؟
نعم! تدعم جميع المتصفحات الحديثة (Chrome وSafari وFirefox وEdge) خصائص CSS لمرشح الخلفية.
هل يؤثر تأثير الزجاج على الأداء؟
يمكن. يُجبر عامل تصفية الخلفية المتصفح على إعادة تركيب ما يوجد خلف العنصر، ويمكن أن تؤدي العديد من الأسطح الكبيرة غير الواضحة في صفحة واحدة إلى تعثر التمرير على الأجهزة المنخفضة الجودة. استخدمه لعدد قليل من الأسطح الرئيسية وليس في كل مكان.
لماذا لا يظهر التشويش؟
يكون لمرشح الخلفية تأثير فقط عندما يكون هناك محتوى خلف العنصر ولا تكون الخلفية معتمة تمامًا. تحتاج بعض المتصفحات القديمة أيضًا إلى الخاصية المسبوقة -webkit-.
كيف أجعل النص قابلاً للقراءة على الزجاج؟
ارفع عتامة الخلفية أو أضف لونًا خفيفًا. لا يضمن الضباب وحده التباين، والخلفية الساطعة والمزدحمة ستتغلب عليه - تحقق من النص مقابل الجزء الأكثر ازدحامًا في الخلفية.
الأدوات ذات الصلة
مولد رمز الاستجابة السريعة
قم بتحويل أي رابط أو نص إلى رمز QR قابل للمسح الضوئي
محول حالة النص
قم بالتبديل بين العلوي والسفلي والعنوان وحالة الجمل
تنسيق JSON
قم بتنسيق JSON والتحقق من صحته وتصغيره على الفور
ساعة توقيت ومؤقت العد التنازلي
ساعة توقيت على الإنترنت بملء الشاشة، ومسجل الدورة والعد التنازلي