ٹرینڈی فراسٹڈ گلاس UI ایفیکٹس بنائیں۔ بلر، شفافیت اور بارڈرز ایڈجسٹ کریں، پھر CSS اپنے پروجیکٹ میں کاپی کریں۔ 100٪ مفت۔ رجسٹریشن نہیں۔
جدید ویب ڈیزائن کے لیے جدید فراسٹڈ شیشے کا اثر۔
سخت پرائیویسی، فوری عمل اور صفر رگڑ کے لیے بنایا گیا۔ کوئی سبسکرپشن، پے وال یا اکاؤنٹ نہیں۔
چمکدار پس منظر پر بلر، اوپیسٹی اور سیچوریشن حقیقی وقت میں ایڈجسٹ کریں تاکہ گلاس ایفیکٹ فوری دیکھیں۔
webkit-prefixed backdrop-filter کوڈ خود بناتا ہے تاکہ Safari، Chrome اور Firefox میں مطابقت رہے۔
معیاری CSS کلاسز بنائیں یا بصری ڈیزائن فوری Tailwind CSS یوٹیلیٹی کلاسز میں بدل دیں۔
100٪ کلائنٹ سائیڈ اجرا کا مطلب سلائیڈرز کھینچتے ہی ریاضیاتی CSS اپڈیٹ بغیر تاخیر۔
ہمارے لوکل فرسٹ WebAssembly انجن کا لیگیسی کلاؤڈ ٹولز سے موازنہ کریں۔
| فیچر | Utiliome (مقامی براؤزر) | لیگیسی کلاؤڈ کنورٹرز |
|---|---|---|
| لائیو پیش منظر | حقیقی وقت کا انٹرایکٹو کینوس | جامد کوڈ جنریٹرز |
| کوڈ آؤٹ پٹ | Vanilla CSS اور Tailwind یوٹیلیٹی کلاسز | صرف CSS |
| مطابقت | خود -webkit-backdrop-filter شامل کرتا ہے | دستی پریفکس درکار |
| لاگت | اشتہار کے بغیر ہمیشہ مفت | پریمیم لے آؤٹ پے وال کے پیچھے |
سافٹ ویئر انسٹال کرنے کی ضرورت نہیں۔ سب کچھ براہِ راست ویب براؤزر میں چلتا ہے۔
بلر سلائیڈر سے طے کریں کہ گلاس کارڈ کے پیچھے پس منظر عناصر کتنے فراسٹڈ ہوں۔
پس منظر رنگ کا الفا چینل بدل کر گلاس کو ہلکا سلیٹ ٹنٹ یا روشن سفید فراسٹڈ شکل دیں۔
ایکسپورٹ بٹن دبا کر پروڈکشن ریڈی CSS اسنپٹ براہِ راست کلپ بورڈ پر کاپی کریں۔
فوری جواب: Glassmorphism ایک جدید یوزر انٹرفیس ڈیزائن ٹرینڈ ہے جس میں نیم شفاف پس منظر، بھاری background-blur (فراسٹڈ گلاس)، ہلکے کئی تہوں کے سائے اور پتلی بارڈرز ہوتے ہیں۔ یہ عمودی گہرائی اور درجہ بندی بناتا ہے۔
macOS Big Sur، iOS اور Windows 11 Fluent Design میں نمایاں ہونے کے بعد Glassmorphism جدید، پریمیم ویب ایپلیکیشنز کا عملی معیار بن گیا ہے۔
بنیادی فلسفہ "Z-axis" پر انحصار کرتا ہے۔ اوپری تہہ نیم شفاف رکھ کر نیچے کی چمکدار تہوں کو زور سے بلر کرنے سے ڈیزائنرز سخت سالڈ ڈراپ شیڈوز کے بغیر بصری درجہ بندی بناتے ہیں۔ صارف کو پتہ رہتا ہے کہ موجودہ فعال ونڈو "پیچھے" کیا ہو رہا ہے۔
فوری جواب: backdrop-filter CSS پراپرٹی عنصر کے فوراً پیچھے والے حصے پر بلر یا رنگ تبدیلی جیسے گرافکل ایفیکٹس لگاتی ہے۔ معیاری 'filter' خود عنصر کو بلر کرتا ہے، جبکہ backdrop-filter صرف شفاف پس منظر سے دکھائی دینے والی چیز کو متاثر کرتا ہے۔
Glassmorphism ایفیکٹ کے لیے ڈویلپرز مکمل طور پر backdrop-filter CSS رول پر انحصار کرتے ہیں۔ جب عنصر کا پس منظر نیم شفاف ہو (مثلاً background: rgba(255, 255, 255, 0.2);) اور backdrop-filter: blur(10px); لگے، براؤزر کا رینڈرنگ انجن عنصر کے بالکل پیچھے پکسلز پکڑتا ہے، ریاضی سے بلر کرتا ہے، اور عنصر کے اندر پینٹ کرتا ہے۔
اسکرول کے ساتھ پکسلز مسلسل دوبارہ حساب کیے جاتے ہیں اس لیے یہ ہارڈویئر ایکسلریٹڈ پراپرٹی ہے۔ Utiliome کا جنریٹر یہ ہارڈویئر میٹرکس فوری حساب کرتا ہے تاکہ کارکردگی کا اثر حقیقی وقت میں دیکھیں۔
فوری جواب: Tailwind CSS گلاس ایفیکٹس کے لیے بلٹ ان یوٹیلیٹیز دیتا ہے۔ 'backdrop-blur-md'، 'bg-white/30' اور پتلی 'border-white/20' ملا کر کسٹم CSS لکھے بغیر فراسٹڈ گلاس فوری بنتا ہے۔
کسٹم CSS سیکھنے کے لیے اچھا ہے، مگر جدید ڈویلپرز اکثر Tailwind جیسے یوٹیلیٹی فریم ورک ترجیح دیتے ہیں۔
Tailwind میں گلاس کارڈ کے لیے تین ضروری تہیں چاہیے:
backdrop-blur-md یا backdrop-blur-lg استعمال کریں۔bg-white/20 (لائٹ موڈ) یا bg-slate-900/40 (ڈارک موڈ)۔border border-white/20 سے نقل کریں۔Utiliome کا جنریٹر معیاری CSS یا مکمل فارمیٹڈ Tailwind کلاس سٹرنگ نکالنے کا ٹوگل دیتا ہے۔
فوری جواب: Safari نے تاریخی طور پر backdrop filters کے لیے '-webkit-' پریفکس مانگا ہے۔ اگر یہ چھوٹ جائے تو iOS اور macOS پر گلاس ایفیکٹ بالکل فیل ہو کر فلیٹ شفاف باکس بن جاتا ہے۔
جونیئر ڈویلپرز کے لیے glassmorphism کا بڑا نقص Apple ہارڈویئر بھولنا ہے۔ Chrome اور Firefox معیاری backdrop-filter نیٹو سپورٹ کرتے ہیں، مگر Safari (خاص طور پر پرانے iOS) وینڈر پریفکس سختی سے مانگتا ہے۔
اگر -webkit-backdrop-filter: blur(10px); شامل نہ ہو تو Apple صارف صرف الجھا ہوا شفاف div دیکھتے ہیں اور متن پس منظر پر بالکل ناقابلِ پڑھائی ہوتا ہے۔
Utiliome کا CSS جنریٹر ضروری WebKit پریفکس آؤٹ پٹ کوڈ میں خود داخل کرتا ہے تاکہ ڈیزائن تمام بڑے آپریٹنگ سسٹمز پر ایک جیسا دکھے۔
فوری جواب: Glassmorphism اکثر ایکسیسبیلٹی فیل کرتا ہے کیونکہ بلرڈ، چمکدار پس منظر پر متن WCAG کنٹراسٹ تناسب فیل کر سکتا ہے۔ متن کا رنگ گلاس کے اوسط ٹنٹ کے مقابلے کافی گہرا (یا ہلکا) ہونا چاہیے۔
glassmorphism ٹرینڈ کی سب سے عام تنقید کمزور ایکسیسبیلٹی ہے۔ اگر رنگین پس منظر تصویر گلاس کارڈ کے پیچھے گہرے نیلے سے چمکدار پیلے میں بدل جائے تو سفید متن اچانک غائب ہو سکتا ہے۔
اسے ٹھیک کرنے کے لیے مضبوط پس منظر ٹنٹ (اوپیسٹی) لگائیں۔ مثلاً سفید متن کے ساتھ گلاس پس منظر rgba(0, 0, 0, 0.6) رکھیں۔ اس سے چاہے جو بھی چمکدار تصویر گلاس کے پیچھے گزرے، متن قانون کے مطابق کم از کم 4.5:1 کنٹراسٹ تناسب برقرار رکھے گا۔
فوری جواب: سطح پر چپٹی پڑی فراسٹڈ گلاس پین گلاس نہیں لگتی۔ اسے بہت ہلکے، چوڑے ڈراپ شیڈو (مثلاً box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) سے اٹھائیں تاکہ پس منظر تہہ سے الگ ہو۔
انسانی دماغ گہرائی سمجھنے کے لیے روشنی کے اشارے مانگتا ہے۔ اگر صرف پس منظر بلر کریں تو UI 'فلیٹ' لگ سکتا ہے۔
گلاس کو ابھرنے کے لیے Z-axis پر اٹھائیں۔ Utiliome کا جنریٹر ہلکا box-shadow ٹویک کرنے دیتا ہے۔ شیڈو اوپیسٹی بہت کم (تقریباً 10٪) رکھ کر بلر ریڈیئس بہت زیادہ (32px) کرنے سے نرم ایمبیئنٹ اوکلیوژن بنتی ہے جو گلاس کو نیچے کے چمکدار پس منظر سے خوبصورت الگ کرتی ہے۔
Utiliome کے مفت آن لائن Glassmorphism CSS جنریٹر کے بارے میں وہ سب جو آپ کو جاننا چاہیے۔
Safari کو '-webkit-backdrop-filter' پریفکس چاہیے۔ Utiliome CSS ایکسپورٹ میں یہ پریفکس خود بناتا ہے تاکہ کراس براؤزر مطابقت رہے۔
ہاں۔ Utiliome کے جنریٹر میں ٹوگل ہے جو بصری ڈیزائن فوری Tailwind یوٹیلیٹی کلاسز میں بدلتا ہے (مثلاً backdrop-blur-md bg-white/30)۔
ہاں، بڑے عناصر پر بھاری بلر کا زیادہ استعمال کم طاقت والے موبائل ڈیوائسز پر لیگ لا سکتا ہے کیونکہ اسکرول کے دوران GPU پکسلز مسلسل دوبارہ حساب کرتا ہے۔
حقیقی گلاس کناروں پر روشنی منعکس کرتی ہے۔ بہت کم اوپیسٹی والی 1px سالڈ بارڈر (جیسے rgba(255, 255, 255, 0.2)) سے اس کنارے کی عکاسی نقل کریں۔
ہاں، 100٪ مفت: حد نہیں، اشتہار نہیں، اکاؤنٹ رجسٹریشن نہیں۔