<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>
<div id="box3" class="box">Box 3</div>

<blockquote>
  <q>The key to success is to start before you're ready.</q>
  <p>&mdash; Marie Forleo</p>
</blockquote>
p {
  padding: 10px;
}
.box {
  padding: 20px;
  width: 50%;
  margin: 30px auto;
  background:#000;
  color:#fff;
}

/* offset-x | offset-y | color */
#box1 {
  box-shadow: 6px 12px yellow;
}

/* offset-x | offset-y | blur-radius | spread-radius | color */
#box2 {
  box-shadow: 6px 12px 4px 8px red;
}

/* Any number of shadows, separated by commas */
#box3 {
  box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green;
}

blockquote {
  width: 50%;
  margin: 50px auto;
  padding: 20px;
  font-size: 24px;
  box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.