How to Design a Shadow-Based Box in CSS3

In this post, I will show you how to create a box and page wrapper with a shadow effect using CSS3.

To create this effect, we use the box-shadow property.

Here is the HTML structure:

<div class="container">
  <div class="container-hold pull-left">
    <div class="container-hold-top pull-left">
    </div>
  </div>
</div>

Here is the CSS:

.container {
  box-shadow: 10px 10px 5px #888;
}

.container .container-hold {
  box-shadow: -8px 10px 5px #888;
  width: 100%;
  height: 100%;
}

.container .container-hold .container-hold-top {
  box-shadow: 10px -10px 8px #888;
  height: 100%;
  width: 100%;
}

This code creates shadows on the left, right, and top sides of the wrapper.

Here is the formal syntax for box-shadow:

box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

Note that I did not use the spread-radius in my example. Feel free to experiment with it to expand the shadow further.

Here are some great related posts:

• Fun with Box Shadows - Markus Stange
• Box Shadow Inset Demo
• CSS3 Info: Box Shadow

If I missed anything, please leave a comment so I can improve this post.