گلاسمورفزم جنریٹر
بیک ڈراپ بلر، شفافیت اور بارڈرز کے ساتھ فروسٹڈ گلاس UI کارڈز بنائیں، پھر CSS کاپی کریں۔
گلاس کارڈ
ایک شوخ پس منظر پر تیرتا ہوا دھندلا شیشہ۔
—
backdrop-filter اور -webkit-backdrop-filter دونوں دیتا ہے۔ نوٹ: backdrop-filter پرانے براؤزرز میں سپورٹ نہیں ہے (مثلاً Firefox 103 سے پہلے)؛ ان کے لیے ٹھوس فال بیک پس منظر شامل کریں۔
گلاسمورفزم جنریٹر کے بارے میں
Glassmorphism جنریٹر ٹھنڈے شیشے جیسا کارڈ اثر بناتا ہے: ایک شفاف پینل جو اپنے پیچھے موجود ہر چیز کو دھندلا کر دیتا ہے۔ سلائیڈرز backdrop-filter کے blur اور saturation، شیشے کے رنگ اور اس کی شفافیت، بارڈر کے رنگ اور اوپیسٹی، کارنر ریڈیئس اور بیرونی سائے کو کنٹرول کرتے ہیں — ہر تبدیلی ایک واضح پس منظر پر لائیو دکھائی جاتی ہے تاکہ آپ اثر کا حقیقی طور پر اندازہ لگا سکیں۔
چار کوالٹی پری سیٹس — subtle، frosted، vivid اور dark glass — آپ کو شروع کرنے کے لیے آزمودہ امتزاجات دیتے ہیں۔ dark پری سیٹ دکھاتا ہے کہ یہی نسخہ ڈارک UI پر کیسے ڈھلتا ہے، جہاں ایک ہلکا سا روشن بارڈر شیشے کو پس منظر سے الگ دکھانے کا زیادہ تر کام کرتا ہے۔
تیار شدہ CSS میں backdrop-filter اور -webkit-backdrop-filter دونوں پریفکس شامل ہیں، جو Safari کے لیے ضروری ہے۔ ایک مطابقتی خبردار نوٹ کریں: پرانے براؤزرز (مثلاً ورژن 103 سے پہلے کا Firefox) backdrop-filter کو سپورٹ نہیں کرتے، اس لیے ان کے لیے ایک ٹھوس فال بیک پس منظر شامل کریں۔
گلاسمورفزم جنریٹر استعمال کرنے کا طریقہ
- ایک پری سیٹ سے شروع کریں — subtle، frosted، vivid یا dark glass — یا ڈیفالٹس سے۔
- backdrop فلٹر کی blur اور saturation ایڈجسٹ کریں۔
- شیشے کا رنگ اور اس کی شفافیت سیٹ کریں۔
- بارڈر کا رنگ، بارڈر اوپیسٹی، کارنر ریڈیئس اور آؤٹ لائن سائے ایڈجسٹ کریں۔
- CSS کاپی کریں — اس میں پہلے سے Safari کے لیے -webkit- پریفکس والی پراپرٹی شامل ہے۔