Example of adding outside and inside shadows:

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        padding: 20px;
      }
      .left {
        float: left;
        margin-left: 20px;
      }
      .box {
        width: 110px;
        height: 110px;
        background: #fff;
        color: #9e9e9e;
        margin: 0 auto;
        margin-bottom: 20px;
        text-align: center;
        line-height: 100px;
      }
      .shadow-bottom {
        box-shadow: 0 8px 10px -6px #000000;
      }
      .shadow-top {
        box-shadow: 0 -8px 10px -6px #000000;
      }
      .shadow-left {
        box-shadow: -8px 0 10px -6px #000000;
      }
      .shadow-right {
        box-shadow: 8px 0 10px -6px #000000;
      }
      .inner-shadow-bottom {
        box-shadow: inset 0 8px 10px -6px #000000;
      }
      .inner-shadow-top {
        box-shadow: inset 0 -8px 10px -6px #000000;
      }
      .inner-shadow-left {
        box-shadow: inset 8px 0 10px -6px #000000;
      }
      .inner-shadow-right {
        box-shadow: inset -8px 0 10px -6px #000000;
      }
    </style>
  </head>
  <body>
    <div class="left">
      <div class="shadow-bottom box">bottom</div>
      <div class="shadow-top box">top</div>
      <div class="shadow-left box">left</div>
      <div class="shadow-right box">right</div>
    </div>
    <div class="left">
      <div class="inner-shadow-bottom box">top inset</div>
      <div class="inner-shadow-top box">bottom inset</div>
      <div class="inner-shadow-left box">left inset</div>
      <div class="inner-shadow-right box">right inset</div>
    </div>
  </body>
</html>