Grow your CSS skills. Land your dream job.

Last updated on:

Layered Paper

<div class="layered-paper">
.layered-paper {
    background: #eee;
        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


  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 –

  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!


Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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