☁️ مولد ظل الصندوق CSS — Box-Shadow Generator
مولد ظل الصندوق المباشر لـ CSS box-shadow: تحكم في الإزاحة، الضبابية، الانتشار، اللون، والشفافية مع معاينة حية ونسخ الكود بنقرة واحدة.
0px
10px
20px
0px
20%
📚 عن هذه الأداة
خاصية box-shadow في CSS تضيف ظلاً حول العناصر. تتكون من 4-5 قيم: الإزاحة الأفقية (X)، الإزاحة الرأسية (Y)، الضبابية (Blur)، الانتشار (Spread)، واللون. إضافة الكلمة المفتاحية inset في البداية تجعل الظل داخلياً. للحصول على عمق طبيعي: استخدم Y موجبة (10-20px)، Blur ضعف Y، وشفافية 15-25%.
❓ أسئلة شائعة
كيف أنشئ ظلاً ناعماً؟
استخدم Y إيجابية صغيرة (5-10px)، ضبابية كبيرة (20-40px)، انتشار 0، شفافية 10-15%. هذا يحاكي ظلاً طبيعياً.
ما هو inset shadow؟
ظل داخلي يبدو وكأن العنصر "مضغوط" داخل الصفحة. يُستخدم للأزرار المضغوطة والحقول.
هل يمكن دمج عدة ظلال؟
نعم — افصل بفاصلة: box-shadow: 0 1px 2px #000, 0 10px 20px rgba(0,0,0,.1); — مفيد لإنشاء عمق متعدد الطبقات.
هل box-shadow يؤثر على الأداء؟
الظلال الكبيرة (blur > 50px) قد تبطئ التمرير على الجوال. للأداء الأمثل، استخدم blur < 30px أو حوّل الظل إلى صورة.