بیک ڈراپ بلر، شفافیت اور بارڈرز کے ساتھ فروسٹڈ گلاس UI کارڈز بنائیں، پھر CSS کاپی کریں۔

پیش منظر

گلاس کارڈ

ایک شوخ پس منظر پر تیرتا ہوا دھندلا شیشہ۔

پس منظر
CSS آؤٹ پٹ

backdrop-filter اور -webkit-backdrop-filter دونوں دیتا ہے۔ نوٹ: backdrop-filter پرانے براؤزرز میں سپورٹ نہیں ہے (مثلاً Firefox 103 سے پہلے)؛ ان کے لیے ٹھوس فال بیک پس منظر شامل کریں۔

px
%
px
گلاس فل
20%
بارڈر
30%
کوالٹی پری سیٹس

گلاسمورفزم جنریٹر کے بارے میں

Glassmorphism جنریٹر ٹھنڈے شیشے جیسا کارڈ اثر بناتا ہے: ایک شفاف پینل جو اپنے پیچھے موجود ہر چیز کو دھندلا کر دیتا ہے۔ سلائیڈرز backdrop-filter کے blur اور saturation، شیشے کے رنگ اور اس کی شفافیت، بارڈر کے رنگ اور اوپیسٹی، کارنر ریڈیئس اور بیرونی سائے کو کنٹرول کرتے ہیں — ہر تبدیلی ایک واضح پس منظر پر لائیو دکھائی جاتی ہے تاکہ آپ اثر کا حقیقی طور پر اندازہ لگا سکیں۔

چار کوالٹی پری سیٹس — subtle، frosted، vivid اور dark glass — آپ کو شروع کرنے کے لیے آزمودہ امتزاجات دیتے ہیں۔ dark پری سیٹ دکھاتا ہے کہ یہی نسخہ ڈارک UI پر کیسے ڈھلتا ہے، جہاں ایک ہلکا سا روشن بارڈر شیشے کو پس منظر سے الگ دکھانے کا زیادہ تر کام کرتا ہے۔

تیار شدہ CSS میں backdrop-filter اور -webkit-backdrop-filter دونوں پریفکس شامل ہیں، جو Safari کے لیے ضروری ہے۔ ایک مطابقتی خبردار نوٹ کریں: پرانے براؤزرز (مثلاً ورژن 103 سے پہلے کا Firefox) backdrop-filter کو سپورٹ نہیں کرتے، اس لیے ان کے لیے ایک ٹھوس فال بیک پس منظر شامل کریں۔

گلاسمورفزم جنریٹر استعمال کرنے کا طریقہ

  1. ایک پری سیٹ سے شروع کریں — subtle، frosted، vivid یا dark glass — یا ڈیفالٹس سے۔
  2. backdrop فلٹر کی blur اور saturation ایڈجسٹ کریں۔
  3. شیشے کا رنگ اور اس کی شفافیت سیٹ کریں۔
  4. بارڈر کا رنگ، بارڈر اوپیسٹی، کارنر ریڈیئس اور آؤٹ لائن سائے ایڈجسٹ کریں۔
  5. CSS کاپی کریں — اس میں پہلے سے Safari کے لیے -webkit- پریفکس والی پراپرٹی شامل ہے۔

اکثر پوچھے جانے والے سوالات

پینل کو ایک نیم شفاف پس منظری رنگ ملتا ہے، اور backdrop-filter: blur() اس کے پیچھے رینڈر ہونے والی ہر چیز کو دھندلا کر دیتا ہے۔ saturation بڑھانا دھندلے رنگوں کو زندہ رکھتا ہے، اور ایک ہلکا نیم مبہم بارڈر شیشے کے کنارے کا تاثر مضبوط کرتا ہے۔

backdrop-filter کو عنصر پر ایک شفاف پس منظر اور براؤزر سپورٹ درکار ہوتا ہے — Firefox نے اسے صرف ورژن 103 میں فعال کیا۔ Safari کو -webkit-backdrop-filter پریفکس چاہیے، جو تیار شدہ CSS میں پہلے سے شامل ہے۔ ہمیشہ ایک ٹھوس فال بیک پس منظر متعین کریں۔

کنٹراسٹ کا انتظام۔ blur بڑھائیں یا شفافیت کم کریں جب تک متن سب سے مصروف ممکنہ پس منظر کے خلاف کنٹراسٹ رہنمائی پر پورا نہ اترے، اور بارڈر شامل کریں تاکہ کارڈ کا کنارہ ہلکے اور گہرے دونوں علاقوں پر نظر آتا رہے۔

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

جی ہاں، مکمل طور پر مفت اور براؤزر پر مبنی — بغیر اکاؤنٹ اور بغیر اپ لوڈ کے سلائیڈرز ایڈجسٹ کریں اور CSS کاپی کریں۔

شیئر کریں

مقبول تلاشیں
گلاسمورفزم css جنریٹر css گلاسمورفزم جنریٹر فروسٹڈ گلاس css ایفیکٹ backdrop-filter بلر css گلاس کارڈ css جنریٹر css گلاس ایفیکٹ میکر گلاسمورفزم پس منظر جنریٹر css بلر کارڈ جنریٹر
مدد چاہیے؟
اس ٹول میں کوئی مسئلہ ملا؟ ہماری ٹیم کو بتائیں۔
مسئلہ رپورٹ کریں

اس مفت ٹول کو اپنی ویب سائٹ پر شامل کریں — نیچے دیا گیا کوڈ کاپی اور پیسٹ کریں۔