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. Permalink to comment#

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

  3. 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. 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. 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

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".