صمم تأثير box-shadow في CSS مع معاينة مباشرة.
مولّد Box Shadow لـ CSS أداة تصميم مرئية تُنشئ خاصية box-shadow في CSS بشريط تمرير لكل قيمة: الإزاحة الأفقية (X)، الرأسية (Y)، التمويه (blur)، الانتشار (spread)، اللون، ونمط الظل الداخلي (inset). المعاينة المباشرة تُظهر تأثير الظل على مربع افتراضي، والكود ينشأ آنياً وينسخ بلمسة واحدة إلى محررك. مناسبة لتصميم البطاقات، الأزرار، النوافذ المنبثقة، وعناصر واجهة المستخدم بمظهر ثلاثي الأبعاد.
blur يُنعّم حواف الظل ويجعله أكثر شفافية كلما زاد. spread يوسّع مساحة الظل بجميع الاتجاهات قبل تطبيق blur — قيم موجبة تُكبّر، سالبة تُصغّر.
الظل العادي يظهر خارج العنصر ويعطي إحساساً بالارتفاع. inset يظهر داخل العنصر ويعطي إحساساً بالعمق أو الحفر — مناسب للحقول المضغوطة.
الظل الأسود بشفافية 15-25% يبدو طبيعياً أكثر من الأسود الكامل. الأداة تُضيف قناع شفافية 40 تلقائياً على اللون المختار.
نعم — CSS يقبل عدة قيم box-shadow مفصولة بفواصل، مثلاً ظل خارجي ناعم مع ظل داخلي حاد. الأداة تُنتج ظلاً واحداً، لكن يمكنك دمج الأكواد يدوياً.
الظلال الكبيرة مع blur عالٍ قد تُبطئ الرسم على العناصر المتحركة أو المتحوّلة. للأنيميشن، فضّل ظلاً صغيراً أو transform: scale بدل box-shadow متغيّر.