CSS3 يدعم خاصية جديدة تسمي “علبة الظل” الخاصية التي تقوم بإضافة الظلال إلى العناصر على الصفحة الخاصة بك ،
عبارة الــ “box-shadow” :

[html] box-shadow: <horizontal> <vertical> <blur> <color>
[/html]

حيث :
Horizontal :ويحدد طول الأفقي إزاحة الظل. قيمة موجبة (أي : 5PX) سوف يجعل الظل على يمين المربع ، في حين أن القيمة سالبة (أي : – 10px) وجعله على يسار بدلا من ذلك.

Vertical:ويحدد طول العمودي إزاحة الظل. قيمة موجبة (أي : 5PX) سوف يجعل الظل التالية الجزء السفلي من مربع، في حين أن القيمة سالبة (أي : – 10px) وجعله بدلا من ذلك إلى اليسار

Blur: تحديد طول نصف قطرها انتشار الطمس. القيمة الافتراضية هي 0 ، والذي يعني عدم وجود ضبابية. يزيد من الضبابية، في حين تقلص قيمة سالبة في واقع الظل. و 0 إذافي الحالة الإفتراضيه.

color: قيمة اللون أي تحديد لون الظل.

المثال الأول:

عمل صندوق ظلال مع offset لليمين وللأسفل بدون blur :

[html] <style type="text/css">
.shadow1{
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
}
</style>

<div style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>
[/html]

هذا التأثير لصندوق الظل مشابه للتأثير الأول ولكن مع اضافة blur خفيف:

[html] <style type="text/css">
.shadow2{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>

<div style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>
[/html]