خاصية ظل الصندوق box-shadow

الصياغة

.card {
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
  /* x y blur (spread) color */
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<style>
  .demo { display: inline-block; background: white; padding: 18px 24px; border-radius: 12px; margin: 8px; }
  .soft { box-shadow: 0 6px 20px rgb(0 0 0 / 0.12); }
  .glow { box-shadow: 0 8px 24px rgb(124 92 255 / 0.45); }
</style>
<div style="background:#ede9fe; padding:14px; border-radius:14px">
  <div class="demo soft">ظل ناعم كلاسيكي</div>
  <div class="demo glow">توهج بنفسجي بلون العلامة</div>
</div>

أهم القيم

💡 نصائح عملية

• الوصفة الذهبية: y صغير + blur كبير + شفافية عالية — كثافة أقل مما تظن دائمًا
• هفر يرفع البطاقة: كبّر الظل قليلًا مع transition — إحساس التحليق

⚠️ أخطاء شائعة

• ظلال سوداء كثيفة حادة — بصمة التسعينيات
• ظل ضخم على عشرات العناصر المتحركة معًا — كلفة رسم محسوسة

خصائص ذات صلة