مفت CSS Box Shadow جنریٹر
لائیو پریویو، ملٹی لیئر اسٹیکنگ، کلر پکر، inset ٹوگل، اور ایک کلک کاپی کے ساتھ CSS box-shadow کا بصری بلڈر۔ Material، neumorphism، اور glow presets شامل ہیں۔
فعال پرت کے سایہ کو نہ رکھنے کے لیے خانہ کو گھسیٹیں - باریک کنٹرول کے لیے Shift دبائیں
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);پری سیٹس
عام استعمالات
- کارڈ UI Shadowsڈیش بورڈز، مصنوعات کے شبکے، اور ڈیش بورڈز کے لیے خوبصورت کارڈ shadows بنائیں۔
- بٹن دبانے کے اثراتبٹن shadows بنائیں جو حقیقی دنیا کی گہرائی اور دبانے کی حالتوں کی نقل کریں۔
- Neumorphism نرم UIجوڑے گئے روشن + تاریک shadows کے ساتھ نرم-UI neumorphism نظر بنائیں۔
- ماڈل اور Popover Shadowsڈائلاگز اور ڈراپ ڈاؤنز کے لیے بلند، تیرتا ہوا احساس بنائیں۔
- چمک اور توجہ کے حلقے کے اثراتچمکتے ہوئے لہجے کے اثرات، توجہ کے حلقے، اور نیون کے انداز کے نمایاں اثرات بنائیں۔
یہ کیسے کام کرتا ہے
باکس شیڈو جنریٹر مکمل طور پر کلائنٹ سائیڈ React ٹول ہے — نہ سرور، نہ لائبریری۔ یہ state میں شیڈو لیئر آبجیکٹس کی فہرست رکھتا ہے، ہر تبدیلی پر ہاتھ سے لکھے rgba() فارمیٹر سے درست CSS box-shadow اسٹرنگز بناتا ہے، اور React کے style prop کے ذریعے انہیں پیش منظر عنصر پر لگاتا ہے تاکہ براؤزر کا اپنا رینڈرنگ انجن فوراً نتیجہ بنائے۔
- 1لیئر کے پیرامیٹرز فارمیٹر کو جاتے ہیںہر شیڈو لیئر x/y آفسیٹ، بلر، اسپریڈ، ہیکس رنگ اور شفافیت کی قدر رکھتی ہے۔ ہر تبدیلی پر ایک چھوٹا shadowToCss فنکشن regex سے ہیکس رنگ کو RGB اجزاء میں بدلتا ہے، پھر rgba() اسٹرنگ بناتا ہے — مثلاً 0px 4px 12px 0px rgba(0, 0, 0, 0.15)۔ متعدد لیئرز کوما سے جوڑی جاتی ہیں۔
- 2براؤزر لائیو پیش منظر بناتا ہےبنی ہوئی اسٹرنگ JSX میں براہ راست div عنصر کی boxShadow style پراپرٹی کو دی جاتی ہے۔ React DOM اپ ڈیٹ کرتا ہے، اور براؤزر کا CSS انجن فوراً شیڈو بناتا ہے — کوئی canvas یا WebGL نہیں، صرف مقامی CSS رینڈرنگ۔
- 3گھسیٹ کر جگہ بدلنا Pointer Events API استعمال کرتا ہےپیش منظر باکس پر کلک کر کے گھسیٹنے سے عنصر پر setPointerCapture چلتا ہے، پھر onPointerMove کے فرق سے فعال لیئر کے x اور y آفسیٹ حقیقی وقت میں اپ ڈیٹ ہوتے ہیں۔ Shift دبائے رکھنے سے باریک ترتیب کے لیے 0.25x پیمانہ لگتا ہے۔
- 4آؤٹ پٹ کلپ بورڈ پر کاپی ہوتا ہےٹول ایک ہی لیئر ڈیٹا سے دو آؤٹ پٹ فارمیٹ بناتا ہے: معیاری CSS box-shadow ڈیکلریشن، اور Tailwind arbitrary-value کلاس (shadow-[...]) جس میں Tailwind کے قواعد کے مطابق اسپیسز کی جگہ انڈرسکور ہوتے ہیں۔ ایک کلک کاپی navigator.clipboard.writeText استعمال کرتی ہے۔
متعلقہ ٹولز
CSS Border Radius جنریٹر
ہر کونے پر آزادانہ کنٹرول کے ساتھ گول کونے بصری طور پر ڈیزائن کریں۔ نامیاتی blob اشکال کے لیے elliptical X/Y سنٹیکس کی حمایت کرتا ہے۔
CSS گرڈ جنریٹر
CSS گرڈ کو بصری طور پر ڈیزائن کریں — ٹریکس، یونٹ اور gaps — اور تیار شدہ CSS اور HTML کو کاپی کریں۔
CSS Flexbox جنریٹر
flex سمت، wrap، justify اور align کے ساتھ براہ راست اشیاء کے ساتھ تجربہ کریں — اور CSS کو کاپی کریں۔