انشئ ظلال CSS جميلة وناعمة بصرياً. ولد كود CSS الدقيق لتصميمات الويب الحديثة الخاصة بك دون كتابة سطر واحد يدوياً.
تصميم العمق
الظلال ضرورية لخلق العمق والتسلسل الهرمي في تصميم الويب. يمكن للظل الخفيف أن يجعل الزر يبرز، بينما يمكن للظل العميق أن يخلق وهم بطاقة عائمة. ومع ذلك، فإن كتابة خاصية `box-shadow` يدوياً تتطلب التعامل مع إزاحات X/Y، نصف قطر التمويه، نصف قطر الانتشار، وقيم الألوان—مما يؤدي غالباً إلى التجربة والخطأ.
يسمح لك مولد Box Shadow المرئي الخاص بنا بتعديل هذه القيم باستخدام منزلقات بديهية ورؤية النتائج فوراً على عنصر معاينة. بمجرد أن تكون راضياً، ببساطة انسخ مقتطف CSS المولد.
الميزات
🎛️ منزلقات بصرية
اضبط الإزاحة الأفقية، الإزاحة العمودية، التمويه، والانتشار باستخدام عناصر تحكم دقيقة.
🎨 اللون والشفافية
اختر لون الظل واضبط شفافيته (قناة ألفا) للحصول على ذلك المظهر الدقيق والمثالي.
📥 دعم الظل الداخلي (Inset)
بدّل وضع "Inset" لإنشاء ظلال داخلية، مثالية للأزرار المضغوطة أو حقول الإدخال.
🚀 متوافق مع المتصفحات
يولد كود CSS3 قياسياً متوافقاً مع جميع المتصفحات الحديثة (Chrome, Firefox, Safari, Edge).
كيفية الاستخدام
- ضبط الإزاحات: حرك منزلقات X و Y لتحديد موقع مصدر ضوء الظل.
- النعومة: قم بزيادة نصف قطر التمويه (Blur) لظل أنعم، أو قلله لتصميمه حاداً.
- الحجم: استخدم نصف قطر الانتشار (Spread) لتوسيع أو تقليص الظل بالنسبة للعنصر.
- نسخ الكود: انقر فوق كتلة الكود لنسخ قاعدة `box-shadow: ...;` إلى الحافظة.
شرح CSS Box Shadow
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
- 10px (X-offset): المسافة الأفقية. الموجب يتحرك يميناً، السالب يساراً.
- 10px (Y-offset): المسافة العمودية. الموجب يتحرك لأسفل، السالب لأعلى.
- 5px (Blur): مدى تمويه الظل. 0 يعني حاداً.
- 0px (Spread): مقدار توسع الظل قبل التمويه.
- rgba(...): لون وشفافية الظل.
أسئلة شائعة
هل يمكنني إضافة ظلال متعددة؟
تسمح CSS القياسية بظلال متعددة مفصولة بفواصل. تركز هذه الأداة حالياً على توليد طبقة ظل واحدة مثالية.
هل يؤثر هذا على الأداء؟
الاستخدام المفرط لأنصاف أقطار تمويه كبيرة أو ظلال متعددة قد يؤثر على أداء العرض (rendering) في الأجهزة المحمولة القديمة، لكن المتصفحات الحديثة تتعامل معها بكفاءة عالية.