CSS باکس شیڈو (box-shadow) جنریٹر
سلائیڈر ہلا کر اور کارڈ پر نتیجہ دیکھ کر box-shadow بنائیں۔ نرم اور زیادہ حقیقی سائے کے لیے چھ تہوں تک جمع کریں، دبے ہوئے اثر کے لیے inset استعمال کریں، اور نرم، تیرتا ہوا، چمک یا نیومارفزم جیسے پری سیٹ سے آغاز کریں۔ ایک کلک سے CSS کاپی کریں۔
استعمال کا طریقہ
- پری سیٹ چنیں یا شیڈو کا آفسیٹ، بلر، اسپریڈ، رنگ اور اوپیسٹی ایڈجسٹ کریں۔
- + سے تہیں شامل کریں اور ہر ایک کو منتخب کر کے ایڈٹ کریں؛ اپنے ڈیزائن سے ملانے کے لیے بیک گراؤنڈ، باکس کا رنگ اور کونوں کا رداس بدلیں۔
- CSS کاپی کریں اور عنصر کے رول میں پیسٹ کر دیں۔
عمومی سوالات
بلر اور اسپریڈ کیا کرتے ہیں؟
بلر شیڈو کے کنارے کو نرم کرتا ہے؛ صفر پر کنارہ سخت رہتا ہے۔ اسپریڈ بلر سے پہلے شیڈو کو ہر سمت میں بڑا کرتا ہے، اور منفی اسپریڈ اسے چھوٹا کرتا ہے، جس سے بڑا دھندلا شیڈو عنصر کے نیچے رہتا ہے۔
شیڈو کی کئی تہیں کیوں استعمال کریں؟
حقیقی سائے چیز کے قریب گہرے ہوتے ہیں اور دور جا کر ہلکے پڑ جاتے ہیں۔ چھوٹے تیز شیڈو کو بڑے نرم شیڈو کے ساتھ ملانا اس کی نقل کرتا ہے اور ایک شیڈو سے زیادہ قدرتی لگتا ہے۔ فہرست کی پہلی تہہ سب سے اوپر بنتی ہے۔
کیا box-shadow صفحے کو سست کرتا ہے؟
عام استعمال میں نہیں۔ بہت سے عناصر پر بہت بڑا بلر، یا خود شیڈو کو اینیمیٹ کرنا، سست فونز پر کارکردگی کم کر سکتا ہے؛ اینیمیٹ کرنے کے لیے اس کے بجائے شیڈو والے pseudo-element کی اوپیسٹی بدلیں۔
🏷️ میٹا ٹیگ جنریٹر
🖼️ اوپن گراف (Open Graph) جنریٹر
🔗 UTM لنک بلڈر
🌈 CSS گریڈینٹ جنریٹر