با استفاده از ویژگی box-shadow می توانید به عناصر html عمق داده و اصطلاحاً سایه ایجاد کنید. فقط حواستان باشد که در اعدادی که استفاده می کنید، اغراق نکنید!

box-shadow: 1px 1px 3px #292929;

box-shadow چهار پارامتر می گیرد:

• اندازه انحراف از محور x
• اندازه انحراف از محور y
• میزان تیرگی
• رنگ سایه

حالا چیزی که شاید تصورش را نمی کردید، اینست که: می توانید بیش از یک box-shadow برای هر عنصر داشته باشید و طرح های جالبی را درست کنید. مثلاً می توانیم دو رنگ سبز و آبی را ترکیبی بعنوان سایه استفاده کنیم:

box-shadow: 1px 1px 3px green, -1px -1px 3px blue;

شکل های زیر را می توان بوسیله کدهایی که در ادامه می آید، بوجود آورد:

html:

<div class="box"></div>
<div class="box-a"></div>
<div class="c-box">
   <img src="https://cdn.tutsplus.com/net/uploads/legacy/855_cssProperties/images/tuts.png" alt="Tuts" />
</div>

css:

body {
  margin: 20px auto;
  font-family: "Lato";
  font-weight: 300;
  width: 600px;
}

.box {
  box-shadow: 1px 1px 3px #292929;
  width: 200px;
  height: 200px;
  margin: 20px;
  display: inline-block;
}

.box-a {
  box-shadow: 1px 1px 3px green, -1px -1px 3px blue;
  width: 200px;
  height: 200px;
  margin: 20px;
  float: right;
}

.c-box {
  position: relative;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
  padding: 10px;
  background: white;
  margin-top: 50px;
}

/* Just making the image fit the box */
.c-box img {
  width: 100%;
  border: 1px solid #8a4419;
  border-style: inset;
}

.c-box:after {
  content: "";
  position: absolute;
  z-index: -1; /* hide shadow behind image */
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  width: 70%;
  left: 15%; /* one half of the remaining 30% (see width above) */
  height: 100px;
  bottom: 0;
}

*با اعمال سایه به شبه کلاس های ::before و  ::after ، می توانید پرسپکتیوهای جالبی بسازید:

html:

<div class="box">
   <img src="tuts.jpg" alt="Tuts" />
</div>

css:

.box:after {
  content: "";
  position: absolute;
  z-index: -1; /* hide shadow behind image */
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  width: 70%;
  left: 15%; /* one half of the remaining 30% (see width above) */
  height: 100px;
  bottom: 0;
}