Membuat Efek Bayangan pada Area

Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek:
CSS Bayangan Outset

div {
  -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */
  -moz-box-shadow:10px 10px 7px #222;    /* Firefox */
  box-shadow:10px 10px 7px #222;         /* W3C */
}

CSS Bayangan Inset

div {
  -webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Firefox */
  -moz-box-shadow:inset 10px 10px 7px #222;    /* Firefox */
  box-shadow:inset 10px 10px 7px #222;         /* W3C */
}

10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini:

TOP DOWN	INLINE
#kotak1 { -webkit-box-shadow:10px 10px 7px #222; -moz-box-shadow:10px 10px 7px #222; box-shadow:10px 10px 7px #222; } ...... <div id='kotak1'>OBJEK</div>	<div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'> OBJEK </div>

Dan ini adalah contoh-contoh penerapan yang lebih detail. Saya sudah memberikan warna merah dan hijau untuk mempertegas bagian mana yang harus menjadi perhatian:

-webkit-box-shadow: 10px 5px 7px #222; -moz-box-shadow: 10px 5px 7px #222; box-shadow: 10px 5px 7px #222;

-webkit-box-shadow: 0 10px 7px #222; -moz-box-shadow: 0 10px 7px #222; box-shadow: 0 10px 7px #222;

-webkit-box-shadow: 10px 0 7px #222; -moz-box-shadow: 10px 0 7px #222; box-shadow: 10px 0 7px #222;

-webkit-box-shadow: 0 0 7px #222; -moz-box-shadow: 0 0 7px #222; box-shadow: 0 0 7px #222;

-webkit-box-shadow: 0 0 20px #222; -moz-box-shadow: 0 0 20px #222; box-shadow: 0 0 20px #222;

-webkit-box-shadow: 0 0 20px #f10c0c; -moz-box-shadow: 0 0 20px #f10c0c; box-shadow: 0 0 20px #f10c0c;

-webkit-box-shadow: 10px 5px 0 #222; -moz-box-shadow: 10px 5px 0 #222; box-shadow: 10px 5px 0 #222;

-webkit-box-shadow: -10px -5px 0 #222; -moz-box-shadow: -10px -5px 0 #222; box-shadow: -10px -5px 0 #222;

-webkit-box-shadow: inset 10px 5px 7px #222; -moz-box-shadow: inset 10px 5px 7px #222; box-shadow: inset 10px 5px 7px #222;

-webkit-box-shadow: inset 0 10px 7px #222; -moz-box-shadow: inset 0 10px 7px #222; box-shadow: inset 0 10px 7px #222;

dicopas dari http://hompimpaalaihumgambreng.blogspot.com/2011/06/moz-box-shadow-60px-16px-teal-webkit.html#.UD9IZVKo3Sw