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

Last updated on:

Layered Paper

<div class="layered-paper">
    Howdy
</div>
.layered-paper {
    background: #eee;
    box-shadow:
        0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
        0 10px 0 -5px #eee, /* The second layer */
        0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */
        0 20px 0 -10px #eee, /* The third layer */
        0 20px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */
}

View Demo

Reference URL

Comments

  1. Kriti Sharma
    Permalink to comment#

    really nice designing with css

  2. Pankaj C.
    Permalink to comment#

    Amazing effect! now my facebook fanbox has a layered effect…!

  3. Brandon
    Permalink to comment#

    I did something just like this the other day! After using box-shadow for this effect, I had a world of brainstorms-a-comin’ for more uses. Here’s a little screenshot of my use. Sorry – I can’t show more than this right now!

  4. Stuart Robson
    Permalink to comment#

    Nice effect.

    Here’s a blogpost of a ‘paper stack’ I created last March using CSS3 –

    http://alwaystwisted.com/post.php?s=2011-03-06-creating-a-css3-paper-stack

  5. Alex Saji
    Permalink to comment#

    Awesome effect with CSS.

  6. Luke Patrick

    Is there perhaps a way to flip this effect so that it goes upwards, rather than down? Would be useful for a project I’m doing!

    Thanks!

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