CSS Box Shadow Generator
آفسیٹ، بلر، اسپریڈ، رنگ، opacity اور inset کے لائیو سلائیڈرز کے ساتھ لیئرڈ CSS box-shadows بنائیں — ایک حقیقی عنصر پر پیش نظارہ کریں اور فوری طور پر پیسٹ کے لیے تیار CSS کاپی کریں۔
box-shadow: —;
سب کچھ آپ کے براؤزر میں لائیو اپڈیٹ ہوتا ہے — کوئی اپلوڈ نہیں، کوئی سائن اپ نہیں، بالکل مفت۔
CSS Box Shadow Generator کے بارے میں
CSS Box Shadow Generator آپ کو کوڈ میں اندازہ لگانے کے بجائے بصری طور پر box-shadows ڈیزائن کرنے دیتا ہے۔ افقی اور عمودی آفسیٹ، بلر ریڈیس، اسپریڈ ریڈیس، رنگ اور شفافیت کے لیے سلائیڈرز کھینچیں — ایک inset ٹوگل کے ساتھ — اور دیکھیں کہ ایک حقیقی عنصر لائیو اپ ڈیٹ ہوتا ہے۔ جب یہ صحیح لگے، تو ایک کلک میں پیسٹ کرنے کے لیے تیار CSS کاپی کریں۔
جدید UI شیڈوز شاذ و نادر ہی ایک تہہ ہوتے ہیں۔ یہ جنریٹر اسٹیکڈ شیڈو تہوں کو سپورٹ کرتا ہے: تہیں شامل کریں، نقل کریں، چھپائیں یا ہٹائیں، اور یا تو منتخب تہہ کو اکیلے یا تمام تہوں کو ملا کر پیش نظارہ کریں۔ ایک ہلکی چوڑی شیڈو کے نیچے ایک تنگ گہری شیڈو کی تہہ لگانا ہی کارڈز اور بٹنوں کو ان کی گہرائی دیتا ہے۔
آپ پیش نظارہ عنصر کو بھی خود اسٹائل کر سکتے ہیں — box کا رنگ، بارڈر ریڈیس اور کینوس کا بیک گراؤنڈ — تاکہ شیڈو کو ایک حقیقت پسندانہ سیاق میں پرکھا جائے، بشمول تاریک سطحیں۔ کسی پریسیٹ سے شروع کریں، تحریک کے لیے "Randomize layer" دبائیں، اور جب بھی صاف سلیٹ چاہیں ری سیٹ کریں۔ سب کچھ آپ کے براؤزر میں چلتا ہے۔
CSS Box Shadow Generator استعمال کرنے کا طریقہ
- افقی آفسیٹ، عمودی آفسیٹ، بلر، اسپریڈ، رنگ اور شفافیت کے لیے سلائیڈرز ایڈجسٹ کریں، اور اگر آپ اندرونی شیڈو چاہتے ہیں تو "Inset shadow" ٹوگل کریں۔
- شیڈوز کو اسٹیک کرنے کے لیے "Add layer" یا "Duplicate layer" پر کلک کریں، اور ہر تہہ کو باریک بینی سے ٹھیک کرنے کے لیے پیش نظارہ موڈ کو "This layer" اور "All layers" کے درمیان سوئچ کریں۔
- عنصر اور کینوس کو ٹیون کریں — box کا رنگ، بارڈر ریڈیس اور بیک گراؤنڈ — تاکہ پیش نظارہ آپ کے حقیقی ڈیزائن سے میل کھائے۔
- اگر آپ خالی سلائیڈر سیٹ کے بجائے ابتدائی نقطہ چاہتے ہیں تو کوئی پریسیٹ لگائیں یا "Randomize layer" استعمال کریں۔
- مکمل CSS rule (یا صرف قدر) کاپی کریں اور اپنی اسٹائل شیٹ میں پیسٹ کریں۔