DukoTools

CSS Box Shadow Generator

نیا

لائیو پریویو، 12 پری سیٹس اور Tailwind مساوات کے ساتھ ملٹی لیئر CSS باکس شیڈوز بنائیں۔

ہمیشہ کے لیے مفت
رجسٹریشن ضروری نہیں
کوئی فائل سٹور نہیں

پری سیٹ

box-shadow: 0px 4px 16px 0px #00000026;

متعلقہ ٹولز

CSS Border Radius Generator

developer

Generate CSS border-radius with simple or elliptical per-corner control and shape presets.

Try it free

CSS Gradient Generator

developer

Build linear, radial, and conic gradients with presets and copy-ready CSS output.

Try it free

یہ ٹول ایمبیڈ کریں

اس ٹول کو iframe کے ذریعے اپنی ویب سائٹ یا بلاگ میں شامل کریں۔

<iframe src="https://dukotools.com/tools/box-shadow-generator?embed=1" width="100%" height="600" frameborder="0" allow="clipboard-write" loading="lazy" title="box-shadow-generator tool"></iframe>

About CSS Box Shadow Generator

سی ایس ایس باکس شیڈو جنریٹر ڈیزائنرز اور ڈویلپرز کو ریئل ٹائم پیش نظارہ کے ساتھ سی ایس ایس باکس شیڈو کے لیے ایک بصری ایڈیٹر فراہم کرتا ہے۔ پیش نظارہ پینل سرمئی پس منظر پر ایک سفید کارڈ دکھاتا ہے جس میں موجودہ شیڈو لاگو ہوتا ہے، کسی بھی کنٹرول میں تبدیلی کے ساتھ فوری طور پر اپ ڈیٹ ہوتا ہے۔ پانچ سلائیڈرز افقی آفسیٹ، عمودی آفسیٹ، دھندلا رداس، پھیلاؤ کا رداس، اور شیڈو اوپیسٹی کو کنٹرول کرتے ہیں۔ انسیٹ ٹوگل ڈراپ شیڈو اور اندرونی سائے کے درمیان سوئچ کرتا ہے۔ ملٹی لیئر سسٹم کلیدی خصوصیت ہے: ایڈ شیڈو بٹن انفرادی کنٹرول کے ساتھ 5 آزاد شیڈو لیئرز تک اسٹیک کرتا ہے۔ پہلے سے ڈیزائن کردہ بارہ سیٹ کارڈ تھمب نیلز کے طور پر دکھائے جاتے ہیں تاکہ آپ کلک کرنے سے پہلے اثر دیکھ سکیں۔ آؤٹ پٹ سیکشن مکمل باکس شیڈو پراپرٹی ویلیو، پیسٹ کرنے کے لیے تیار مکمل CSS اصول، اور Tailwind مساوی کلاس جہاں ایک موجود ہے دکھاتا ہے۔

کلیدی خصوصیات

  • ریئل ٹائم پیش نظارہ

    کسی بھی شیڈو کنٹرول میں تبدیلی کے ساتھ ہی لائیو کارڈ کا پیش نظارہ فوری طور پر اپ ڈیٹ ہوجاتا ہے۔

  • پانچ سلائیڈر کنٹرولز

    افقی آفسیٹ، عمودی آفسیٹ، دھندلا، پھیلاؤ، اور دھندلاپن سلائیڈرز فی شیڈو لیئر۔

  • ملٹی لیئر شیڈو

    پیش نظارہ میں 5 آزاد شیڈو پرتوں تک کو اسٹیک کریں۔

  • شیڈو ٹوگل انسیٹ کریں۔

    بیرونی ڈراپ شیڈو اور انسیٹ اندرونی سائے کے درمیان سوئچ کرتا ہے۔

  • 12 ڈیزائن پیش سیٹ

    پہلے سے ڈیزائن کردہ پری سیٹس کو تھمب نیل کے طور پر دکھایا گیا ہے جس کا سایہ پہلے سے فوری لوڈنگ کے لیے لاگو ہے۔

  • ٹیل ونڈ کلاس آؤٹ پٹ

    قابل اطلاق ہونے پر Tailwind CSS کے مساوی دکھاتا ہے۔

استعمال کرنے کا طریقہ

  1. 1

    سلائیڈرز کو ایڈجسٹ کریں۔

    سائے کو شکل دینے کے لیے آفسیٹ کو گھسیٹیں، دھندلا کریں اور سلائیڈرز پھیلائیں۔ ریئل ٹائم میں پیش نظارہ اپ ڈیٹ دیکھیں۔

  2. 2

    ایک رنگ چنیں۔

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

  3. 3

    ٹوگل انسیٹ (اختیاری)

    دبایا ہوا یا ابھرا ہوا اندرونی شیڈو اثر بنانے کے لیے انسیٹ کو فعال کریں۔

  4. 4

    مزید پرتیں شامل کریں (اختیاری)

    کمپوزٹ شیڈو اثرات کے لیے 5 تہوں تک اسٹیک کرنے کے لیے ایڈ شیڈو پر کلک کریں۔

  5. 5

    یا ایک پیش سیٹ لوڈ کریں۔

    کسی بھی پیش سیٹ تھمب نیل پر کلک کریں تاکہ اس کی ترتیب کو ایڈیٹر میں لوڈ کریں۔

  6. 6

    سی ایس ایس کاپی کریں۔

    مکمل CSS اصول یا صرف باکس شیڈو ویلیو حاصل کرنے کے لیے کاپی پر کلک کریں۔

حقیقی دنیا کے استعمال کے معاملات

اجزاء کا ڈیزائن

ایک ڈیزائنر ملٹی لیئر ایڈیٹر کا استعمال کرتا ہے تاکہ کارڈ کے اجزاء کا شیڈو بنایا جا سکے جس میں ٹھیک ٹھیک رنگین گلو لیئر کے علاوہ ایک معیاری ڈراپ شیڈو لیئر ہو۔

نیومورفک UI

ایک ڈویلپر نیومورفک لائٹ پیش سیٹ کا استعمال کرکے اور پس منظر سے مماثل رنگوں کو ایڈجسٹ کرکے نیومورفک ڈیش بورڈ بناتا ہے۔

بٹن ڈیزائن

ایک UI ڈیزائنر ایک بٹن کی فعال حالت کے لیے ایک انسیٹ شیڈو بنانے کے لیے پریسڈ پری سیٹ کا استعمال کرتا ہے جو ٹیکٹائل فیڈ بیک دیتا ہے۔

اکثر پوچھے گئے سوالات

Related Free Tools

Explore these tools that work great alongside CSS Box Shadow Generator:

CSS Border Radius Generator

Generate CSS border-radius with simple or elliptical per-corner control and shape presets.

CSS Gradient Generator

Build linear, radial, and conic gradients with presets and copy-ready CSS output.