Example of adding outside and inside shadows:

Source Code: (back to article)

Result: Report an issue

<!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 {

<!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>