جنریٹرز افادیت

100% آن ڈیوائس • فائلیں آپ کے براؤزر کو کبھی نہیں چھوڑتی ہیں۔

CSS Glassmorphism جنریٹر

فراسٹڈ گلاس کی سطح کو بصری طور پر ڈیزائن کریں اور CSS کاپی کریں۔ دھندلاپن، پس منظر کی دھندلاپن، سرحد کی دھندلاپن اور کونے کے رداس کو ایڈجسٹ کریں، پیش نظارہ اپ ڈیٹ کو لائیو دیکھیں، اور ایک اصول سیٹ کو ہٹا دیں جسے آپ براہ راست اسٹائل شیٹ یا جزو میں چسپاں کر سکتے ہیں۔

Glass Card Preview

Frosted glass visual container with live CSS backdrop-filter.

Adjust Glass Parameters

Backdrop Blur:16px

Background Opacity:65%

Border Translucency:20%

Corner Radius:24px

Generated CSS Code

/* 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 نہیں ہے تو شیشے کی موجودہ سطح کو آنکھ سے ملانا۔
یہ سکھانا یا دستاویز کرنا کہ بیک ڈراپ فلٹر مختلف دھندلی اقدار پر کیسے برتاؤ کرتا ہے۔

تعاون یافتہ فارمیٹس اور اختیارات

آؤٹ پٹ	سی ایس ایس ڈیکلریشنز: بیک ڈراپ فلٹر، بیک گراؤنڈ، بارڈر، بارڈر ریڈیئس
کنٹرول کرتا ہے۔	دھندلا رداس، پس منظر کی دھندلاپن، سرحدی دھندلاپن، کونے کا رداس

رازداری اور ڈیٹا ہینڈلنگ

یہاں سب کچھ سلائیڈر ویلیوز سے صفحہ میں سی ایس ایس تیار کیا گیا ہے۔ کچھ بھی اپ لوڈ نہیں کیا گیا ہے، اور آپ کے ڈیزائن کے بارے میں کچھ بھی ریکارڈ نہیں کیا گیا ہے۔

حدود اور جاننے کی چیزیں

بیک ڈراپ فلٹر جامع کرنا مہنگا ہے۔ ایک صفحے پر کئی بڑی دھندلی سطحیں کم درجے کے آلات پر اسکرولنگ کی کارکردگی کو نقصان پہنچا سکتی ہیں۔
اثر صرف اس کے پیچھے موجود مواد پر ظاہر ہوتا ہے۔ فلیٹ ٹھوس پس منظر پر شیشے کی سطح ایک سادہ رنگ کے باکس کی طرح دکھائی دیتی ہے۔
رسائی آپ کی ذمہ داری ہے: چیک کریں کہ سطح پر موجود متن اب بھی پس منظر کے مصروف ترین حصے کے برعکس متضاد تقاضوں کو پورا کرتا ہے۔

خرابی کا سراغ لگانا

دھندلاپن براؤزر میں ظاہر نہیں ہوتا ہے۔

بیک ڈراپ فلٹر کو دوسرے مواد پر بیٹھنے کے لیے عنصر کی ضرورت ہوتی ہے اور اس کے لیے ایک غیر مکمل طور پر مبہم پس منظر کی ضرورت ہوتی ہے۔ کچھ پرانے براؤزرز کو بھی -webkit- پریفکسڈ پراپرٹی کی ضرورت ہوتی ہے۔

پینل پر موجود متن کو پڑھنا مشکل ہے۔

پس منظر کی دھندلاپن میں اضافہ کریں یا ٹنٹ کو گہرا کریں۔ جب بیک ڈراپ روشن اور مصروف ہو تو صرف دھندلا ہی اس کے برعکس کی ضمانت نہیں دیتا۔

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.

کیا بیک ڈراپ فلٹر تمام براؤزرز میں تعاون یافتہ ہے؟

جی ہاں! تمام جدید براؤزرز (کروم، سفاری، فائر فاکس، ایج) بیک ڈراپ فلٹر سی ایس ایس خصوصیات کو سپورٹ کرتے ہیں۔

کیا شیشے کا اثر کارکردگی کو نقصان پہنچاتا ہے؟

یہ کر سکتا ہے. بیک ڈراپ فلٹر براؤزر کو عنصر کے پیچھے موجود چیزوں کو دوبارہ کمپوزٹ کرنے پر مجبور کرتا ہے، اور ایک صفحے پر کئی بڑی دھندلی سطحیں کم درجے کے آلات پر اسکرولنگ سٹٹر بنا سکتی ہیں۔ اسے ہر جگہ کی بجائے چند کلیدی سطحوں کے لیے استعمال کریں۔

دھندلا پن کیوں نظر نہیں آتا؟

backdrop-filter کا اثر صرف اس وقت ہوتا ہے جب عنصر کے پیچھے مواد ہو اور پس منظر مکمل طور پر مبہم نہ ہو۔ کچھ پرانے براؤزرز کو بھی -webkit- پریفکسڈ پراپرٹی کی ضرورت ہوتی ہے۔

میں شیشے پر متن کو پڑھنے کے قابل کیسے رکھوں؟

پس منظر کی دھندلاپن کو بڑھائیں یا ٹنٹ شامل کریں۔ صرف دھندلا پن ہی تضاد کی ضمانت نہیں دیتا، اور ایک روشن، مصروف پس منظر اسے شکست دے گا — پس منظر کے مصروف ترین حصے کے خلاف متن کو چیک کریں۔