مولد ظل CSS (Box Shadow)

الظلال تضيف عمقاً وتسلسلاً هرمياً لواجهة المستخدم. الظل الجيد لا يلفت الانتباه لنفسه لكنه يجعل الواجهة أكثر طبيعية.

صياغة box-shadow في CSS

box-shadow: إزاحة-أفقية إزاحة-رأسية نصف-قطر-ضبابية نصف-قطر-انتشار لون inset;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);

شرح المعاملات

• الإزاحة الأفقية: موجبة للأيمن، سالبة للأيسر
• الإزاحة الرأسية: موجبة للأسفل، سالبة للأعلى
• نصف قطر الضبابية: كلما كبر كان الظل أكثر نعومة
• نصف قطر الانتشار: يتحكم في حجم الظل
• inset: ظل داخلي

ظلال حسب اتجاهات التصميم

• Neumorphism: ظل مزدوج فاتح/داكن
• Material Design: ظلال متدرجة حسب الارتفاع
• Glassmorphism: ظل شفاف خفيف