مولّد ظل الصندوق CSS
أنشئ ظلال CSS مع معاينة مباشرة. اضبط الإزاحة والضبابية والانتشار واللون والشفافية — ثم ركّب حتى 4 ظلال وانسخ CSS.
إعلان
إعدادات مسبقة:
ظل 1
أفقي4
عمودي4
ضبابية8
انتشار0
اللون
الشفافية20
إعلان
الأسئلة الشائعة
ما هو ظل الصندوق في CSS؟
تُضيف خاصية box-shadow في CSS تأثيرات ظل واحداً أو أكثر إلى إطار العنصر. يمكنك التحكم في الإزاحة الأفقية والرأسية (الموضع)، ونصف قطر الضبابية (النعومة)، ونصف قطر الانتشار (الحجم)، واللون، وما إذا كان الظل داخلياً أو خارجياً.
ماذا يفعل "الداخلي" (inset)؟
بدون inset، يُرسم ظل الصندوق خارج العنصر كظل مسقط. مع inset، يُرسم الظل داخل حدود العنصر، مما يمنح تأثير التوهج الداخلي أو السطح المضغوط.
هل يمكنني تركيب ظلال صندوق متعددة؟
نعم — يسمح CSS بظلال متعددة مفصولة بفواصل على خاصية box-shadow واحدة. استخدم "إضافة طبقة ظل" لإنشاء حتى 4 ظلال متراكبة. يُرسم الظل الأول في القائمة في الأعلى.