Properti box shadow yang ada pada CSS memungkinkan disagner web  dapat lebih berkreasi dalam menerapkan bayangan luar dan dalam pada sebuah kotak, menetapkan nilai untuk warna, ukuran, blur dan offset..  CSS Box Shadow sering digunakan untuk menampilkan bayangan pada elemen level-blok ( seperti div  )

box-shadow:…px…px…px…px color;

1. Horizontal offset : apabila nilainya positif maka bayangan akan berada disebelah kanan kotak, dan jika negatif maka bayangan akan berada disebelah kiri kotak.
2. Vertikal offset : apabila nilainya positif maka bayangan akan berada dibawah kotak, dan jika negatif maka bayangan akan berada diatas kotak.
3. Blur radius : apabila nol maka akan seperti bayangan biasa, dan jika nilainya semakin besar maka bayangan akan tampak menjadi blur.
4. Spread Radius (optional)
5. Warna dari bayangan

Untuk lebih jelasnya mari kita lihat ilustrasi bayangan pada Gambar dibawah ini :

Berikut Kode CSS yang mengatur style diatas :

Example A menampilkan Shadow pada bagian kiri dan atas sebesar 5 px

#Example_A {
 -moz-box-shadow: -5px -5px #888;
 -webkit-box-shadow: -5px -5px #888;
 box-shadow: -5px -5px #888;
 }

 Example B menampilkan Bayangan dan blur distance sebesar 5 px

#Example_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

 Example C

#Example_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

Example D

#Example_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

Example E

#Example_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

Example F

#Example_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

Membuat Inner Shadow dengan "inset"

Example G code :

#Example_G {
-moz-box-shadow: inset -5px -5px #888;
-webkit-box-shadow: inset -5px -5px #888;
box-shadow: inset -5px -5px #888;
}

Example H code :

#Example_H {
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
}

Example I code :

#Example_I {
-moz-box-shadow: inset -5px -5px 0 5px #888;
-webkit-box-shadow: inset -5px -5px 0 5px#888;
box-shadow: inset -5px -5px 0 5px #888;
}

Example J code :

#Example_J {
-moz-box-shadow: inset -5px -5px 5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}

Example K code :

#Example_K {
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inner 0 0 5px #888;
}

 Example L code :

#Example_L {
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}