<header>
  <h1>CSS Box Shadow Examples</h1>
  <p class="intro">An exploration of the CSS <code>box-shadow</code> property.</p>
  <a class="button" href="http://sixrevisions.com/css/css-box-shadow/">Read the Guide</a>
</header>

<section class="demos">
  <div class="box basic-drop-shadow">Basic Drop Shadow</div>
  <pre><code>box-shadow: 0 0 10px;</code></pre>
  
  <div class="box inner-shadow">Inner Shadow</div>
  <pre><code>box-shadow: inset 0 0 10px;</code></pre>
  
  <div class="box offset-bottom-right-shadow">Offset Drop Shadow (Bottom Right)</div>
  <pre><code>box-shadow: <strong>5px 5px</strong> 10px;</code></pre>
  
  <div class="box offset-top-left-shadow">Offset Drop Shadow (Top Left)</div>
  <pre><code>box-shadow: <strong>-5px -5px</strong> 10px;</code></pre>
  
  <div class="box inset-property-box-shadow">Inset Value</div>
  <pre><code>box-shadow: <strong>inset</strong> 0 0 5px 5px olive;</code></pre>
  
  <div class="box no-inset-property-box-shadow">No Inset Value</div>
  <pre><code>box-shadow: 0 0 5px 5px olive;</code></pre>
  
  <div class="box horizontal-offset-box-shadow">Horizontal Offset Value</div>
  <pre><code>box-shadow: <strong>20px</strong> 10px;</code></pre>
  
  <div class="box vertical-offset-box-shadow">Vertical Offset Value</div>
  <pre><code>box-shadow: 10px <strong>-20px</strong>;</code></pre>
  
  <div class="box blur-radius-box-shadow">Blur Radius Value</div>
  <pre><code>box-shadow: 5px 5px <strong>20px</strong>;</code></pre>
  
  <div class="box spread-distance-box-shadow">Spread Distance Value</div>
  <pre><code>box-shadow: 0 0 10px <strong>5px</strong>;</code></pre>
  
  <div class="box negative-spread-distance-box-shadow">Negative Spread Distance Value</div>
  <pre><code>box-shadow: 0 10px 10px <strong>-5px</strong>;</code></pre>
  
  <div class="box default-color-box-shadow">Default Color Value</div>
  <pre><code><strong>color: red;</strong>
box-shadow: 0 0 10px 5px;</code></pre>
  
  <div class="box color-box-shadow">With Color Value</div>
  <pre><code><strong>color: red;</strong>
box-shadow: 0 0 10px 5px <strong>blue</strong>;</code></pre>
  
  <div class="box multiple-box-shadows">Multiple Box Shadows</div>
  <pre><code>box-shadow: <strong>-5px -5px 30px 5px red</strong>, <strong>5px 5px 30px 5px blue</strong>;</code></pre>
</section>
html, body, p, a, h1, h2, pre, code, section, header, div {
  margin: 0;
  padding: 0;
  border: 0;
}
/* Basic */
body {
  font: normal 400 18px/22px "Abel", "Arial", sans-serif;
  background-color: #ebebeb;
  color: #000000;
}
p {
  margin-bottom: 20px;
}
h1 {
  font: bold 700 32px/38px "Sintony", "Arial", sans-serif;
  margin-bottom: 14px;
}
pre, code {
  font: normal 400 18px/22px "Oxygen Mono", "Courrier", monospace;
}

/* Classes */
.box {
  width: 50%;
  text-align: center;
  margin: 20px auto;
  margin-bottom: 30px;
  padding: 50px 15px;
  background-color: #ced7ef;
  color: gray;
  vertical-align: middle;
}
.basic-drop-shadow {
  box-shadow: 0 0 10px;
}
.inner-shadow {
  box-shadow: inset 0 0 10px;
}
.offset-bottom-right-shadow {
  box-shadow: 5px 5px 10px;
}
.offset-top-left-shadow {
  box-shadow: -5px -5px 10px;
}
.inset-property-box-shadow {
  box-shadow: inset 0 0 5px 5px olive;
}
.no-inset-property-box-shadow {
  box-shadow: 0 0 5px 5px olive;
}
.horizontal-offset-box-shadow {
   box-shadow: 20px 10px;
}
.vertical-offset-box-shadow {
  box-shadow: 10px -20px;
}
.blur-radius-box-shadow {
  box-shadow: 5px 5px 20px;
}
.spread-distance-box-shadow {
  box-shadow: 0 0 10px 5px;
}
.negative-spread-distance-box-shadow {
  box-shadow: 0 10px 10px -5px;
}
.default-color-box-shadow {
  color: red;
  box-shadow: 0 0 10px 5px;
}
.color-box-shadow {
  color: red;
  box-shadow: 0 0 10px 5px blue;
}
.multiple-box-shadows {
  box-shadow: -5px -5px 30px 5px red, 5px 5px 30px 5px blue;
}
/* Aesthetics Only */
.button {
  color: #fff;
  background-color: #82bfe5;
  display: block;
  margin: 40px auto;
  width: 90%;
  max-width: 200px;
  padding: 12px 8px;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.4s;
}
.button:hover {
  background-color: #9dd2f3;
  transition: background 0.2s;
}
.button:focus, .a:focus {
  outline: none;
}
header, .demos {
  display: block;
  width: 96%;
  max-width: 640px;
  margin: 75px auto; 
  text-align: center;
}
header {
  margin: 20px auto;
}
.intro, pre, code {
  color: #acacac;
}
pre {
  margin-bottom: 60px;
  white-space: pre-wrap;
}
pre strong {
  font-style: normal;
  font-weight: 400;
  color: #06baba;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.