Box Shadow Generator

حول هذه الأداة

أفقي — القيم الموجبة تحرّك الظل يميناً، والسالبة يساراً. عمودي — الموجبة للأسفل، والسالبة للأعلى. ضبابية — القيم الأكبر تُنشئ ظلالاً أكثر نعومة وانتشاراً. انتشار — الموجب يوسّع الظل، والسالب يُقلّصه.

فعّل داخلي لإنشاء ظلال داخلية. أضف ظلالاً متعددة بالنقر على "+ إضافة ظل" — تُفصل بفواصل في مخرجات CSS، مُرتّبةً من الأمام للخلف.

كيفية الاستخدام

1. اضبط شريطَي الأفقي والعمودي لتعيين إزاحة الظل.
2. زِد الضبابية للحصول على ظل ناعم، أو اضبطها على 0 لظل حاد.
3. استخدم الانتشار لتوسيع الظل أو تقليصه خارج حدود العنصر.
4. انقر على "+ إضافة ظل" لتراكم ظلال متعددة للحصول على تأثيرات أثرى.

حالات الاستخدام

يستخدم المصممون box-shadow لإضافة العمق والارتفاع في مكونات البطاقات. تُنشئ الظلال الداخلية تأثيرات الضغط على الأزرار. تُنتج الظلال المتعددة المتراكبة إضاءة واقعية بضوء محيط وضوء رئيسي.

الأسئلة الشائعة

• ما هو خيار inset؟ — تظهر الظلال الداخلية داخل حدود العنصر لا خارجه، وتُفيد في إنشاء تأثيرات الضغط على حقول الإدخال والأزرار.
• هل يمكنني إضافة ظلال متعددة؟ — نعم. انقر على "+ إضافة ظل" لإضافة طبقة ظل أخرى. تُدمج جميع الظلال في تصريح box-shadow واحد مفصولٍ بفواصل.
• ماذا يفعل قيمة انتشار سالبة؟ — يُقلّص الانتشار السالب الظلَّ ليكون أصغر من العنصر. بالتوليف مع الإزاحة والضبابية، يُنشئ ظلاً خفياً يظهر من جانب واحد فقط.