Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Stack of Paper

<div class="papers"></div>
body {
  background: #666;    
}
.papers {
  background-color: white;
  height: 350px;
  padding: 20px;
  width: 260px;
  -webkit-box-shadow: 
        1px 1px   0 rgba(0,   0,   0,   0.100), 
        3px 3px   0 rgba(255, 255, 255, 1.0), 
        4px 4px   0 rgba(0,   0,   0,   0.125), 
        6px 6px   0 rgba(255, 255, 255, 1.0),  
        7px 7px   0 rgba(0,   0,   0,   0.150), 
        9px 9px   0 rgba(255, 255, 255, 1.0),  
        10px 10px 0 rgba(0,   0,   0,   0.175);
  -moz-box-shadow: 
        1px 1px   0 rgba(0,   0,   0,   0.100), 
        3px 3px   0 rgba(255, 255, 255, 1.0), 
        4px 4px   0 rgba(0,   0,   0,   0.125), 
        6px 6px   0 rgba(255, 255, 255, 1.0),  
        7px 7px   0 rgba(0,   0,   0,   0.150), 
        9px 9px   0 rgba(255, 255, 255, 1.0),  
        10px 10px 0 rgba(0,   0,   0,   0.175);
  box-shadow: 
        1px 1px   0 rgba(0,   0,   0,   0.100), 
        3px 3px   0 rgba(255, 255, 255, 1.0), 
        4px 4px   0 rgba(0,   0,   0,   0.125), 
        6px 6px   0 rgba(255, 255, 255, 1.0),  
        7px 7px   0 rgba(0,   0,   0,   0.150), 
        9px 9px   0 rgba(255, 255, 255, 1.0),  
        10px 10px 0 rgba(0,   0,   0,   0.175);
    
}

View Demo

Reference URL

Comments

  1. Permalink to comment#

    That’s pretty sweet, another great snippet Chris

  2. Jacob Harris
    Permalink to comment#

    This is super cool, thanks for sharing.

  3. suzyo
    Permalink to comment#

    SWEET!

  4. Chris

    Would there be any way to put a background image on this?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```