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


  1. User Avatar
    Kriti Sharma
    Permalink to comment#

    really nice designing with css

  2. User Avatar
    Pankaj C.
    Permalink to comment#

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

  3. User Avatar
    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. User Avatar
    Stuart Robson
    Permalink to comment#

    Nice effect.

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

  5. User Avatar
    Alex Saji
    Permalink to comment#

    Awesome effect with CSS.

  6. User Avatar
    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!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.